<template>
  <ele-modal
    :visible="visible"
    title="表计型号"
    width="80%"
    :destroy-on-close="true"
    append-to-body
    :maxable="true"
    @update:visible="updateVisible"
    :bodyStyle="{ padding: '30px 40px' }"
  >
    <div class="energy-classification">
      <!-- 搜索区域 -->
      <div class="search-area">
        <seek-page
          :seekList="seekList"
          @search="handleSearch"
          @reset="handleReset"
          :formLength="3"
        />
      </div>

      <!-- 列表视图 -->
      <div class="list-view">
        <ele-pro-table
          ref="table"
          row-key="id"
          :columns="columns"
          :datasource="datasource"
          @columns-change="handleColumnChange"
          @cell-click="cellClick"
          :cache-key="cacheKeyUrl"
          height="calc(100vh - 350px)"
        >
          <template v-slot:action="{ row }">
            <el-radio class="radio" v-model="current.id" :label="row.id">
              <i></i>
            </el-radio>
          </template>
          <template v-slot:modelImg="{ row }">
            <fileMain v-model="row.modelImg" type="view"></fileMain>
          </template>
        </ele-pro-table>
      </div>
    </div>
    <template slot="footer">
      <el-button type="primary" size="small" @click="handleSubmit"
        >确定</el-button
      >
      <el-button size="small" @click="handleCancel">取消</el-button>
    </template>
  </ele-modal>
</template>

<script>
  import { getPage, getById } from '@/api/meterModel/index.js';

  import tabMixins from '@/mixins/tableColumnsMixin';
  import dictMixins from '@/mixins/dictMixins';

  export default {
    mixins: [tabMixins, dictMixins],

    components: {},
    data() {
      return {
        cacheKeyUrl: 'main-meterModel-index',
        visible: false,
        // 表格列配置
        columns: [
          {
            columnKey: 'index',
            label: '序号',
            type: 'index',
            width: 55,
            align: 'center'
          },
          {
            slot: 'action',
            align: 'center',
            fixed: 'left',
            label: '选择',
            reserveSelection: true
          },
          {
            prop: 'code',
            slot: 'code',
            label: '表计模版编码',
            align: 'center',
            minWidth: 120,
            showOverflowTooltip: true
          },
          {
            prop: 'meterTemplateNumber',
            label: '表计模版编号',
            align: 'center',
            minWidth: 150,
            showOverflowTooltip: true
          },
          {
            prop: 'name',
            label: '表计模版名称',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'meterType',
            label: '表计类型',
            align: 'center',
            minWidth: 150,
            formatter: (row, column) => {
              return this.getDictValue('表计类型', row.meterType);
            },
            showOverflowTooltip: true
          },
          {
            prop: 'meterBrand',
            label: '表计品牌',
            align: 'center',
            minWidth: 140
          },
          {
            prop: 'modelImg',
            label: '图片',
            align: 'center',
            minWidth: 150,
            slot: 'modelImg'
          },

          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            minWidth: 160,
            showOverflowTooltip: true
          }
        ],
        cacheKeyUrl: 'ems-energy-classification-list',
        current: {}
      };
    },
    computed: {
      seekList() {
        return [
          {
            label: '表计模版编码',
            value: 'code',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '表计模版编号',
            value: 'meterTemplateNumber',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '表计模版名称',
            value: 'name',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '表计品牌',
            value: 'meterBrand',
            type: 'input',
            placeholder: '请输入'
          },
          {
            label: '表计类型',
            value: 'meterType',
            type: 'DictSelection',
            dictName: '表计类型',
            placeholder: ' '
          }
        ];
      }
    },
    created() {
      this.requestDict('表计类型');
    },
    methods: {
      // 打开弹窗
      async open(energyClassificationCode) {
        this.visible = true;
        this.energyClassificationCode = energyClassificationCode;
        this.current = {};
      },
      // 关闭弹窗
      updateVisible(val) {
        this.visible = val;
      },
      // 单击获取id
      cellClick(row) {
        this.current = row;
      },
      // 提交
      async handleSubmit() {
        if (!this.current) {
          this.$message.error('请选择一条数据！');
          return;
        }
        this.$emit('success', await getById(this.current.id));
        this.handleCancel();
      },
      // 取消
      handleCancel() {
        this.visible = false;
      },
      // 搜索
      handleSearch(where) {
        this.$refs.table.reload({ page: 1, where });
      },
      // 重置
      handleReset() {
        this.$refs.table.reload({ page: 1 });
      },
      // 表格数据源
      datasource({ page, limit, where }) {
        return getPage({
          pageNum: page,
          size: limit,
          ...where
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .energy-classification {
    .classification-card {
      height: calc(100vh - 100px);

      ::v-deep .el-card__body {
        height: 100%;
        padding: 15px;
        display: flex;
        flex-direction: column;
      }
    }

    // 搜索区域
    .search-area {
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #ebeef5;
    }

    // 列表视图
    .list-view {
      flex: 1;
      overflow: hidden;

      ::v-deep .ele-pro-table {
        .el-table {
          border: 1px solid #ebeef5;
          border-radius: 4px;
        }
      }
    }

    // 备注说明
    .remark-area {
      margin-top: 15px;
      padding: 10px;
      background: #f5f7fa;
      border-radius: 4px;
      font-size: 12px;
      color: #909399;

      p {
        margin: 0;
      }
    }
  }
</style>
