<template>
  <a-card :bordered="false">
    <div>
      <a-table
              ref="table"
              size="middle"
              :scroll="{x:true}"
              :columns="columns"
              rowKey="key"
              :dataSource="dataUtilitySource"
              :pagination="false"
              :loading="loading"
              class="j-table-force-nowrap">

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="statusSlot" slot-scope="text,record">
          <a-select v-if="record.key == 1" v-model="record.waterColdStatus" style="width: 80%">
            <a-select-option value="0">关闭</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
          <a-select v-if="record.key == 2" v-model="record.waterHotStatus" style="width: 80%">
            <a-select-option value="0">关闭</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
          <a-select v-if="record.key == 3" v-model="record.electricFlatStatus" style="width: 80%">
            <a-select-option value="0">关闭</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
          <a-select v-if="record.key == 4" v-model="record.electricValleyStatus" style="width: 80%">
            <a-select-option value="0">关闭</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
          <a-select v-if="record.key == 5" v-model="record.gasStatus" style="width: 80%">
            <a-select-option value="0">关闭</a-select-option>
            <a-select-option value="1">启用</a-select-option>
          </a-select>
        </template>
        <template slot="priceSlot" slot-scope="text,record">
          <a-input-number v-if="record.key == 1"
                          :disabled="record.waterColdStatus == 0"
                          v-model="record.waterColdPrice" style="width: 70%" :min="0" :step="1" :precision="2"/>
          <a-input-number v-if="record.key == 2"
                          :disabled="record.waterHotStatus == 0"
                          v-model="record.waterHotPrice" style="width: 70%" :min="0" :step="1" :precision="2"/>
          <a-input-number v-if="record.key == 3"
                          :disabled="record.electricFlatStatus == 0"
                          v-model="record.electricFlatPrice" style="width: 70%" :min="0" :step="1" :precision="2"/>
          <a-input-number v-if="record.key == 4"
                          :disabled="record.electricValleyStatus == 0"
                          v-model="record.electricValleyPrice" style="width: 70%" :min="0" :step="1" :precision="2"/>
          <a-input-number v-if="record.key == 5"
                          :disabled="record.gasStatus == 0"
                          v-model="record.gasPrice" style="width: 70%" :min="0" :step="1" :precision="2"/>
        </template>
        <template slot="bindSlot" slot-scope="text,record">
          <a-select
                  style="width: 80%"
                  v-if="record.key == 1"
                  v-model="record.waterColdBind"
                  placeholder="请选择"
                  :allowClear="true"
                  :disabled="record.waterColdStatus == 0"
          >
            <a-select-option :value="item.id" v-for="(item,index) in stockTypeList" :key="index">{{ item.name }}</a-select-option>
          </a-select>
          <a-select
                  style="width: 80%"
                  v-if="record.key == 2"
                  v-model="record.waterHotBind"
                  placeholder="请选择"
                  :allowClear="true"
                  :disabled="record.waterHotStatus == 0"
          >
            <a-select-option :value="item.id" v-for="(item,index) in stockTypeList" :key="index">{{ item.name }}</a-select-option>
          </a-select>
          <a-select
                  style="width: 80%"
                  v-if="record.key == 3"
                  v-model="record.electricFlatBind"
                  placeholder="请选择"
                  :allowClear="true"
                  :disabled="record.electricFlatStatus == 0"
          >
            <a-select-option :value="item.id" v-for="(item,index) in stockTypeList" :key="index">{{ item.name }}</a-select-option>
          </a-select>
          <a-select
                  style="width: 80%"
                  v-if="record.key == 4"
                  v-model="record.electricValleyBind"
                  placeholder="请选择"
                  :allowClear="true"
                  :disabled="record.electricValleyStatus == 0"
          >
            <a-select-option :value="item.id" v-for="(item,index) in stockTypeList" :key="index">{{ item.name }}</a-select-option>
          </a-select>
          <a-select
                  style="width: 80%"
                  v-if="record.key == 5"
                  v-model="record.gasBind"
                  placeholder="请选择"
                  :allowClear="true"
                  :disabled="record.gasStatus == 0"
          >
            <a-select-option :value="item.id" v-for="(item,index) in stockTypeList" :key="index">{{ item.name }}</a-select-option>
          </a-select>
        </template>
      </a-table>
    </div>
    <a-button type="primary" @click="submitData" style="margin-top: 20px">保存</a-button>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import moment from "moment";
  import { httpAction, getAction } from '@/api/manage'

  export default {
    name: 'roomUtilitySettingList',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
    },
    data() {
      return {
        description: '水电煤设置管理页面',
        dataUtilitySource: [],
        // 表头
        columns: [
          {
            title: '项目',
            align: "center",
            dataIndex: 'project',
          },
          {
            title: '是否启用',
            align: "center",
            dataIndex: 'status',
            width:300,
            scopedSlots: { customRender: 'statusSlot' }
          },
          {
            title: '单价',
            align: "center",
            dataIndex: 'price',
            width:300,
            scopedSlots: { customRender: 'priceSlot' }
          },
          {
            title: '绑定',
            align: "center",
            dataIndex: 'bind',
            width:300,
            scopedSlots: { customRender: 'bindSlot' }
          }
        ],
        url: {
          list: "/business/busRoomUtilitySetting/list",
          delete: "/business/busRoomUtilitySetting/delete",
          deleteBatch: "/business/busRoomUtilitySetting/deleteBatch",
          exportXlsUrl: "/business/busRoomUtilitySetting/exportXls",
          importExcelUrl: "business/busRoomUtilitySetting/importExcel",
          query_info: '/business/busRoomUtilitySetting/queryByHotelId',
          addOrEditInfo: '/business/busRoomUtilitySetting/addOrEditInfo',
        },
        dictOptions: {},
        superFieldList: [],
        stockTypeList:[],
        hotelId:'',
        id:null
      }
    },
    created() {
      this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      initDictConfig() {
        var _this = this;
        var info = JSON.parse(localStorage.getItem("storeInfo"));
        this.hotelId = info.id;
        httpAction(
                "/rooms/cesStockType/getTopTypes",
                { hotelId: info.id },
                "get"
        ).then((res) => {
          if (res.success) {
            this.stockTypeList = res.result;
          }
        });

        getAction(this.url.query_info,{}).then((res)=>{
          console.log(res)
          var info = {};
          if(res.success){
            info = res.result;
            _this.id = res.result.id
          }
          else{
            info = {
              waterColdStatus:"0",
              waterColdPrice:9,
              waterColdBind:null,
              waterHotStatus:"0",
              waterHotPrice:0,
              waterHotBind:null,
              electricFlatStatus:"0",
              electricFlatPrice:0,
              electricFlatBind:null,
              electricValleyStatus:"0",
              electricValleyPrice:0,
              electricValleyBind:null,
              gasStatus:"0",
              gasPrice:0,
              gasBind:null,
            }
          }

          console.log(info);

          var _data = [];
          var _item1 = {
            key: '1',
            project: '水费[冷]',
            status: info.waterColdStatus.toString(),
            price: info.waterColdPrice,
            bind: info.waterColdBind,
            waterColdStatus: info.waterColdStatus.toString(),
            waterColdPrice: info.waterColdPrice,
            waterColdBind: info.waterColdBind,
          }
          _data.push(_item1)

          var _item2 = {
            key: '2',
            project: '水费[热]',
            status: info.waterHotStatus.toString(),
            price: info.waterHotPrice,
            bind: info.waterHotBind,
            waterHotStatus: info.waterHotStatus.toString(),
            waterHotPrice: info.waterHotPrice,
            waterHotBind: info.waterHotBind,
          }
          _data.push(_item2)

          var _item3 = {
            key: '3',
            project: '电费[平]',
            status: info.electricFlatStatus.toString(),
            price: info.electricFlatPrice,
            bind: info.electricFlatBind,
            electricFlatStatus: info.electricFlatStatus.toString(),
            electricFlatPrice: info.electricFlatPrice,
            electricFlatBind: info.electricFlatBind,
          }
          _data.push(_item3)

          var _item4 = {
            key: '4',
            project: '电费[谷]',
            status: info.electricValleyStatus.toString(),
            price: info.electricValleyPrice,
            bind: info.electricValleyBind,
            electricValleyStatus: info.electricValleyStatus.toString(),
            electricValleyPrice: info.electricValleyPrice,
            electricValleyBind: info.electricValleyBind,
          }
          _data.push(_item4)

          var _item5 = {
            key: '5',
            project: '燃气费',
            status: info.gasStatus.toString(),
            price: info.gasPrice,
            bind: info.gasBind,
            gasStatus: info.gasStatus.toString(),
            gasPrice: info.gasPrice,
            gasBind: info.gasBind,
          }
          _data.push(_item5)

          console.log(_data)
          _this.dataUtilitySource = _data
          console.log(_this.dataUtilitySource)
        })
      },
      getSuperFieldList() {
        let fieldList = [];
        fieldList.push({type: 'string', value: 'tenantId', text: '关联租户'})
        fieldList.push({type: 'string', value: 'hotelId', text: '关联酒店'})
        fieldList.push({type: 'int', value: 'waterHotStatus', text: '水费(热)-状态'})
        fieldList.push({type: 'number', value: 'waterHotPrice', text: '水费(热)-价格'})
        fieldList.push({type: 'string', value: 'waterHotBind', text: '水费(热)-绑定'})
        fieldList.push({type: 'int', value: 'waterColdStatus', text: '水费(冷)-状态'})
        fieldList.push({type: 'number', value: 'waterColdPrice', text: '水费(冷)-价格'})
        fieldList.push({type: 'string', value: 'waterColdBind', text: '水费(冷)-绑定'})
        fieldList.push({type: 'int', value: 'electricFlatStatus', text: '电费(平)-状态'})
        fieldList.push({type: 'number', value: 'electricFlatPrice', text: '电费(平)-价格'})
        fieldList.push({type: 'string', value: 'electricFlatBind', text: '电费(平)-绑定'})
        fieldList.push({type: 'int', value: 'electricValleyStatus', text: '电费(谷)-状态'})
        fieldList.push({type: 'number', value: 'electricValleyPrice', text: '电费(谷)-价格'})
        fieldList.push({type: 'string', value: 'electricValleyBind', text: '电费(谷)-绑定'})
        fieldList.push({type: 'int', value: 'gasStatus', text: '煤气费-状态'})
        fieldList.push({type: 'number', value: 'gasPrice', text: '煤气费-价格'})
        fieldList.push({type: 'string', value: 'gasBind', text: '煤气费-绑定'})
        fieldList.push({type: 'int', value: 'delFlag', text: '删除状态(0-正常,1-已删除)'})
        this.superFieldList = fieldList
      },
      submitData() {
        console.log(this.dataUtilitySource)
        var _model = {};
        _model.hotelId = this.hotelId;
        _model.id = this.id;
        this.dataUtilitySource.forEach((item) => {
          console.log(item)
          if (item.key == "1"){
            _model.waterColdStatus = item.waterColdStatus;
            _model.waterColdPrice = item.waterColdPrice;
            _model.waterColdBind = item.waterColdBind;
          }
          if (item.key == "2"){
            _model.waterHotStatus = item.waterHotStatus;
            _model.waterHotPrice = item.waterHotPrice;
            _model.waterHotBind = item.waterHotBind;
          }
          if (item.key == "3"){
            _model.electricFlatStatus = item.electricFlatStatus;
            _model.electricFlatPrice = item.electricFlatPrice;
            _model.electricFlatBind = item.electricFlatBind;
          }
          if (item.key == "4"){
            _model.electricValleyStatus = item.electricValleyStatus;
            _model.electricValleyPrice = item.electricValleyPrice;
            _model.electricValleyBind = item.electricValleyBind;
          }
          if (item.key == "5"){
            _model.gasStatus = item.gasStatus;
            _model.gasPrice = item.gasPrice;
            _model.gasBind = item.gasBind;
          }
        })
        console.log(_model)
        const that = this;
        that.confirmLoading = true;
        httpAction(this.url.addOrEditInfo, _model, 'POST').then((res) => {
          if (res.success) {
            that.$message.success("操作成功");
            that.$emit('ok');
            // that.loadData();
            that.id = res.result.id
          } else {
            that.$message.warning(res.message);
          }
        }).finally(() => {
          that.confirmLoading = false;
        })
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
