<template>
  <section class="equipment-panel-container">
    <!--  所选择项的显示栏  -->
    <div class="selected-info-box">
      <span>{{ selectedInfo.label + '：' }}</span>
      <span>{{ selectedInfo.value }}</span>
    </div>
    <!--  选择区  -->
    <div class="select-factor-box">
      <!--   功能键   -->
      <div class="btns-box">
        <el-button
          v-for="(item, index) in buttons"
          :key="'btn' + index"
          size="mini"
          type="primary"
          :icon="item.icon"
          :disabled="item.disabled"
          v-bind="item.props"
          @click="handleClick(item)">
          {{ item.label }}
          <!-- <img v-if="item.icon" :src="$path + '/img/' + item.icon + '.png'" alt=""/>{{item.label}} -->
        </el-button>
      </div>

      <!--   条件选择框   -->
      <div class="condition-box">
        <th-form
          v-bind="form"
          :options="{
            type: statTypeOpts,
            enterprise: blackoutDeviceEnterpriseOpts,
            grade: statGradeOpts
          }"
          @handleChange="changeHandle"
        />
      </div>

      <!--  表格区域  -->
      <div class="table-box define-tbl-style">
        <th-table
          v-bind="tableList"
          @row-click="handleRowClick"
          @handleSelectionChange="tblSelectChangeHandle"
          @handleSizeChange="pageSizeChangeHandle"
          @handleCurrentChange="currentPageChangeHandle"
        >
          <!-- 图形选择 -->
          <template #txxz="scope">
            <div>
              <img :src="$path + '/img/address.png'" style="cursor: pointer;" @click.stop="txxzClickHandle(scope.row)">
            </div>
          </template>
        </th-table>
      </div>

    </div>

  </section>
</template>

<script>
export default {
  name: 'EquipmentPanel',
  props: {
    request: {
      type: Object,
      default: () => ({})
    },
    //  已选择项
    selectedInfo: {
      type: Object,
      default: () => ({
        label: '变电站名称',
        value: '丁公路110kv变电站'
      })
    },
    //  功能键
    buttons: {
      type: Array,
      default: () => ([
        {
          icon: 'search',
          label: '查询',
          type: 'query'
        }
      ])
    },
    //  条件框
    form: {
      type: Object,
      default: () => ({
        labelWidth: '40px',
        data: {
          type: '0',
          enterprise: '',
          grade: '',
          name: ''
        },
        items: [
          {
            label: '类别',
            prop: 'type',
            component: 'select',
            options: [
              {
                value: 'bdw',
                label: '本单位'
              }
            ],
            style: {
              display: 'inline-block'
              // width: '50%'
            }
          },
          {
            label: '单位',
            prop: 'enterprise',
            component: 'select',
            options: [
              {
                value: 'nc',
                label: '南昌'
              }
            ],
            style: {
              display: 'inline-block'
              // width: '50%'
            }
          },
          {
            label: '等级',
            prop: 'grade',
            component: 'select',
            props: {
              placeholder: '请输入...'
            },
            options: [
              {
                value: 'nc',
                label: '南昌'
              }
            ],
            style: {
              display: 'inline-block'
              // width: '50%'
            }
          },
          {
            label: '名称',
            prop: 'name',
            component: 'input',
            props: {
              placeholder: '请输入...'
            },
            style: {
              display: 'inline-block'
              // width: '50%'
            }
          }
        ],
        rules: {},
        buttons: []
      })
    },

    //  表格
    tableList: {
      type: Object,
      default: () => ({
        columns: [
          {
            prop: 'bdzmc',
            label: '变电站名称',
            minWidth: '160',
            align: 'center'
          }
        ],
        params: {
          // rnd: 0.008549160341703388,
          // key_uuid: "c07cb57c-5e12-ed2a-4204-ca2d12485a01",
          params: {
            'filter': 'q_isFinish=0&source_type=-1&status=',
            'pageIndex': 1,
            'pageSize': 10
          }
        },
        props: {
          height: '300',
          class: 'el-table--scrollable-y'
        },
        showSelection: false,
        handleColumn: [],
        showIndex: true,
        data: [
          // {
          //   bdzmc: '梅庄220变电器'
          // }
        ],
        totalCount: 0
      })
    }
  },
  data() {
    return {
      // 变电站的类别
      statTypeOpts: [
        {
          value: '0',
          label: '本单位'
        },
        {
          value: '1',
          label: '外单位'
        }
      ],
      // 变电站的单位
      blackoutDeviceEnterpriseOpts: [],
      // 变电站的等级
      statGradeOpts: [],

      findType: 'cis'



    }
  },
  watch: {
    request() {
      this.onInit()
    },

    findType() {
      this.onInit()
    }
  },
  created() {},
  mounted() {
    this.onInit()
  },
  methods: {
    // 处理功能键的单击事件
    handleClick(btnParam) {
      this.$emit('btnClickEvent', btnParam)
    },

    // 处理表格行的双击事件
    handleRowClick(row) {
      this.$emit('tblRowClickEvent', row)
    },

    // 表格有checkbox事选择的改变事件处理
    tblSelectChangeHandle(selectedList) {
      this.$emit('handleSelectionChange', selectedList)
    },

    pageSizeChangeHandle(val) {
      this.$emit('handleSizeChange', val)

    },

    currentPageChangeHandle(val) {
      this.$emit('handleCurrentChange', val)
    },

    changeHandle(val, item) {
      this.$emit('changeEvent', val, item)
    },

    txxzClickHandle(row) {},

    //  请求变电站的等级选项
    fetchGradeOptsApi(request) {
      if (!request.getAddBlackoutDeviceGrade) {
        this.statGradeOpts = []
        return false
      }
      request.getAddBlackoutDeviceGrade({ findType: this.findType }).then(res => {

        const gradeList = []
        if (res.data.successful === true && typeof res.data.resultValue === 'object' && Array.isArray(res.data.resultValue.items)) {
          for (let i = 0, len = res.data.resultValue.items.length; i < len; i++) {
            const gradeObj = {}
            gradeObj.label = res.data.resultValue.items[i].TEXT
            gradeObj.value = res.data.resultValue.items[i].VALUE
            gradeList.push(gradeObj)
          }
        }
        this.statGradeOpts = gradeList

      }).catch(err => {
        this.statGradeOpts = []
      })
    },

    //  请求变电站的单位选项E
    fetchEnterpriseOptsApi(request) {
      if (!request.getAddBlackoutDeviceEnterprise) {
        this.blackoutDeviceEnterpriseOpts = []
        return false
      }
      request.getAddBlackoutDeviceEnterprise().then(res => {
        const enterpriseList = []
        if (res.data.successful === true && typeof res.data.resultValue === 'object' && Array.isArray(res.data.resultValue.items)) {
          for (let i = 0, len = res.data.resultValue.items.length; i < len; i++) {
            const enterObj = {}
            enterObj.label = res.data.resultValue.items[i].JC
            enterObj.value = res.data.resultValue.items[i].CIS_ORG_NO
            enterpriseList.push(enterObj)

          }
        }
        this.blackoutDeviceEnterpriseOpts = enterpriseList
      }).catch(err => {
        this.blackoutDeviceEnterpriseOpts = []
      })
    },

    onInit() {
      const gradeItem = this.form.items.find(function(item) {
        return item.prop === 'grade'
      })

      const enterpriseItem = this.form.items.find(function(item) {
        return item.prop === 'enterprise'
      })

      if (!!this.request && !!gradeItem) {
        this.fetchGradeOptsApi(this.request)
      }

      if (!!this.request && !!enterpriseItem) {
        this.fetchEnterpriseOptsApi(this.request)
      }
    }

  }
}
</script>
