<template>
  <el-row class="el-row-container" v-loading="loading">
    <el-col :span="24" style="padding: 16px; height: 100%">
      <el-card style="height: 100%; overflow-y: auto">
        <el-col :span="24" class="elrow-main__col-top">
          <div style="display:flex">
            <select-tree 
              :placeholder="'行政区域（全国）'" 
              style="width:50%"
              :treeData="treeData"
              @handlerClick="handlerClick"
              :checkVal="cusareaName"
            ></select-tree>
            <el-select style="margin:0 20px;width: 50%" placeholder="全部" v-model="priceConfigVal" @change="handleChange">
              <el-option v-for="(item, index) in priceConfigList" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
          </div>
          <!-- <div class="top-left">
            <el-button
              type="primary"
              size="small"
              @click="addAssociation"
              >新增
              </el-button
          ></div> -->
        </el-col>
        <el-col :span="24" class="elrow-main__col-bottom">
          <b-table ref="tableRef" 
            border
            :args="{ 'highlight-current-row': true }"
            :data="loadData" 
            :columns="columns"
            isShowIndex>
            <template #priceconfigWaterchargingtype="scope">
              {{ scope.row.priceconfigWaterchargingtype == 1 ? '是': '否'}}
            </template>
            <template #waterPriceName="scope">
              <span v-if="scope.row.priceconfigWaterchargingtype == 1">
                <div v-for="(item, index) in scope.row.waterPriceSteps" :key="index" class="pricestepNum">
                  {{ 
                    item.pricestepNum == '0' ? '第1阶梯' : item.pricestepNum == '1' ? '第2阶梯' : '第3阶梯'
                  }}
                </div>
              </span>
              <span v-else>
                <div class="pricestepNum">
                  恒定水价
                </div>
              </span>
            </template>
            <template #priceYield="scope">
              <span v-if="scope.row.priceconfigWaterchargingtype == 1">
                <div v-for="(item, index) in scope.row.waterPriceSteps" :key="index" class="pricestepNum">
                  {{ item.pricestepUsagemin + ' - ' + item.pricestepUsagemax }}
                </div>
              </span>
              <span v-else>
                <div class="pricestepNum">
                  -
                </div>
              </span>
            </template>
            <template #averageWaterPrice="scope">
              <span v-if="scope.row.priceconfigWaterchargingtype == 1">
                <div v-for="(item, index) in scope.row.waterPriceSteps" :key="index" class="pricestepNum">
                  {{ item.pricestepUnitprice }}
                </div>
              </span>
              <span v-else>
                <div class="pricestepNum">
                  {{ scope.row.priceconfigWaterunitprice }}
                </div>
              </span>
            </template>
            <template #stepPriceOrNot="scope">
             {{ scope.row.priceconfigElectricitychargingtype == 1 ? '是' : '否' }}
            </template>
            <template #elecPriceName="scope">
              <span v-if="scope.row.priceconfigElectricitychargingtype == 1">
                <div v-for="(item, index) in scope.row.elecPriceSteps" :key="index" class="pricestepNum">
                  {{
                    item.pricestepNum == '0' ? '第1阶梯' : item.pricestepNum == '1' ? '第2阶梯': '第3阶梯'
                  }}
                </div>
              </span>
              <span v-else>
                <div class="pricestepNum">
                  恒定电价
                </div>
              </span>
            </template>
            <template #elecPriceSteps="scope">
              <span v-if="scope.row.priceconfigElectricitychargingtype == 1">
                <div v-for="(item, index) in scope.row.elecPriceSteps" :key="index" class="pricestepNum">
                  {{ item.pricestepUsagemin + ' - ' + item.pricestepUsagemax }}
                </div>
              </span>
              <span v-else>
                <div class="pricestepNum">
                  -
                </div>
              </span>
            </template>
            <template #averageElecPriceSteps="scope">
              <span v-if="scope.row.priceconfigElectricitychargingtype == 1">
              <div v-for="(item, index) in scope.row.elecPriceSteps" :key="index" class="pricestepNum">
                {{ item.pricestepUnitprice }}
              </div>
              </span>
              <span v-else>
                <div class="pricestepNum">
                  {{ scope.row.priceconfigElectricityunitprice }}
                </div>
              </span>
            </template>
            <template #operate="scope">
              <el-link size="small" :underline="false" type="primary" style="margin-right: 10px"
                @click="editAssociation(scope.row)">修改</el-link>
              <el-link size="small" :underline="false" type="danger" style="margin-right: 10px"
                @click="deleteHandler(scope.row)">删除</el-link>
            </template>
          </b-table>
        </el-col>
      </el-card>
    </el-col>
    <set-annual-water-right
      :visible.sync="associationManageShow"
      :editRow="editRow"
      @clearEdit="handlerClearEdit"
    />
  </el-row>
</template>

<script>
import { Message } from 'element-ui';
import SelectTree from '@/components/SelectTree';
import BTable from '@/components/Table/index.vue';
import { Waterchargingtype, Electricitychargingtype } from './status'
import setAnnualWaterRight from './components/setAnnualWaterRight.vue'
import { getPriceList, deletePrice } from '@/api/price/index.js'
import { getTree } from '@/api/tree.js'

export default {
  name: 'waterElectricityPriceSetting',
  components: { BTable, setAnnualWaterRight, SelectTree },
  data() {
    return {
      form: {
        productName: ''
      },
      areaId: '',
      loading: false,
      associationManageShow: false,
      priceConfigVal: '',
      priceconfigWaterchargingtype: '',
      priceconfigElectricitychargingtype: '',
      editRow: {
        cusareaName: ''
      },
      treeData: [],
      cusareaName: '',
      priceConfigList: [
        {
          value: '',
          label: '全部',
          type: 'all'
        },
        {
          value: '0',
          label: '恒定水价',
          type: Waterchargingtype
        }, {
          value: '1',
          label: '阶梯水价',
          type: Waterchargingtype
        }, {
          value: '2',
          label: '恒定电价',
          type: Electricitychargingtype
        }, {
          value: '3',
          label: '阶梯电价',
          type: Electricitychargingtype
        },
      ],
      columns: [
        {
          label: '行政区',
          prop: 'cusareaName',
          customRender: '',
          align: 'center'
        },
        {
          label: '是否阶梯水价',
          prop: 'priceconfigWaterchargingtype',
          customRender: 'priceconfigWaterchargingtype',
          align: 'center'
        },
        {
          label: '水价名称',
          prop: 'waterPriceSteps',
          customRender: 'waterPriceName',
          align: 'center'
        },
        {
          label: '水量（吨）',
          prop: 'waterPriceSteps',
          customRender: 'priceYield',
          align: 'center'
        }, {
          label: '水价（元/吨）',
          prop: 'waterPriceSteps',
          customRender: 'averageWaterPrice',
          align: 'center'
        }, {
          label: '是否阶梯电价',
          prop: 'priceconfigElectricitychargingtype',
          customRender: 'stepPriceOrNot',
          align: 'center'
        }, {
          label: '电价名称',
          prop: 'elecPriceSteps',
          customRender: 'elecPriceName',
          align: 'center'
        }, {
          label: '电量（度）',
          prop: 'elecPriceSteps',
          customRender: 'elecPriceSteps',
          align: 'center'
        }, {
          label: '电价（元/度）',
          prop: 'elecPriceSteps',
          customRender: 'averageElecPriceSteps',
          align: 'center'
        },
        {
          label: '操作',
          customRender: 'operate',
          align: 'center'
        }
      ]
    };
  },
  mounted() {
    this.getWaterrightList()
  },
  methods: {
    editAssociation(row) {
      this.editRow = row
      this.associationManageShow = true
    },
    async getWaterrightList() {
      if (!this.areaId) {
        const res = await getTree()
        this.treeData = res?.data
        this.treeData.unshift({
          cusareaId: '',
          cusareaName: '行政区域（全国）'
        })
        this.areaId = this.treeData[0].cusareaId
      }
    },
    handlerClick(value) {
      this.areaId = value?.cusareaId
    },
    handlerClearEdit() {
      this.editRow = {
        cusareaName: ''
      }
      this.handleSearch()
    },
    handleChange(value) {
      switch (value) {
        case '0':
          this.priceconfigWaterchargingtype = 0
          this.priceconfigElectricitychargingtype = ''
          break
        case '1':
          this.priceconfigWaterchargingtype = 1
          this.priceconfigElectricitychargingtype = ''
          break
        case '2':
          this.priceconfigWaterchargingtype = ''
          this.priceconfigElectricitychargingtype = 0
          break
        case '3':
          this.priceconfigWaterchargingtype = ''
          this.priceconfigElectricitychargingtype = 1
          break
        default:
          this.priceconfigWaterchargingtype = ''
          this.priceconfigElectricitychargingtype = ''
      }
    },
    loadData() {
      return this.getTableData();
    },
    getTableData() {
      const params = {
        areaId: this.areaId,
        priceconfigWaterchargingtype: this.priceconfigWaterchargingtype,
        priceconfigElectricitychargingtype: this.priceconfigElectricitychargingtype
      }
      return getPriceList(params)
    },
    handleSearch() {
      this.$refs.tableRef.refresh(true);
    },
    goDetail(row) {
      this.$refs.sourceCodeDetail.open(row.tarcecodeapplyBatchno)
    },
    deleteHandler(row) {
      const { priceconfigId } = row
      this.$modal
      .confirm(`是否确认删除`)
      .then(() => {
        deletePrice({
          priceconfigIds: priceconfigId
        }).then(() => {
          Message({ message: "删除成功", type: 'success' });
          this.handleSearch()
        })
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.pricestepNum{
  border-bottom: 1px solid #EBEEF5;
}
::v-deep .el-table__row{
  .el-table__cell{
    padding: 0;
  }
  .cell{
    padding: 0;
    line-height:44px;
  }
}
.elrow-main__col-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  .top-left {
    height: 100%;
    display: flex;
    align-items: center;
    i {
      background-color: #40d5ec;
      height: 45%;
      width: 5px;
      margin-right: 5px;
    }
  }
}
</style>
