<template>
  <div class="zj-page">
    <div class="zj-page-search">
      <search-control-panel
        ref="form"
        class="znsbHeadqueryDiv"
        :config="querySearchConfig"
        @search="onSubmit({ flag: true })"
        :colNum="4"
        @formChange="(v) => (formData = v)"
        :LABEL_THRESHOLD="9"
        :labelWidth="'calc(8em + 32px)'"
      />
    </div>
    <div class="zj-page-table">
      <t-table
        :data="list"
        :columns="columns"
        row-key="uuid"
        :max-height="540"
        :pagination="pagination"
        @page-change="onPageChange"
        :loading="tableloading"
      >
        <!-- <template #sjzt="{ row }">
          <span>{{ row.sjzt == '1' ? '上架' : '下架' }}</span>
        </template> -->
        <template #cz="{ row }">
          <t-button variant="text" theme="primary" @click="shtc(row)">审批</t-button>
          <!-- <t-button variant="text" :disabled="row.zt != '3'" theme="primary" @click="changeSjzt(row)">{{
            row.sjzt == '1' ? '下架' : '上架'
          }}</t-button> -->
        </template>
      </t-table>
    </div>
    <!--弹出窗体-->
    <t-dialog :visible="visible" header="审核" :footer="false" :closeOnOverlayClick="false" :onClose="close">
      <template slot="body">
        <t-form ref="form" style="overflow: hidden" :data="addressData" @reset="onReset1" @submit="checkAddress()">
          <t-form-item label="企业名称" class="margin-bottom12">
            <div class="form-text">{{ row.nsrmc }}</div>
          </t-form-item>
          <t-form-item label="资产类型">
            <div class="form-text">{{ row.zclxmc }}</div>
          </t-form-item>
          <t-form-item label="资产数量">
            <div class="form-text">{{ row.zcsl }}</div>
          </t-form-item>
          <t-form-item label="资产单价">
            <div class="form-text">{{ row.djStr }}</div>
          </t-form-item>
          <t-form-item label="有效期止">
            <div class="form-text">{{ row.yxqz }}</div>
          </t-form-item>
          <t-form-item label="资产编号/年份">
            <div class="form-text">{{ row.zcbh }}</div>
          </t-form-item>
          <t-form-item label="联系人">
            <div class="form-text">{{ row.lxr }}</div>
          </t-form-item>
          <t-form-item label="联系方式">
            <div class="form-text">{{ row.lxdh }}</div>
          </t-form-item>
          <t-form-item label="审核结果" class="margin-bottom12">
            <t-select v-model="addressData.shjg1" :options="shztOptions" placeholder="请选择" clearable />
          </t-form-item>
          <t-form-item label="审核意见" name="sqsm" class="margin-bottom12">
            <t-textarea v-model="addressData.shyj1" placeholder="请填写审核意见" :maxlength="100"></t-textarea>
          </t-form-item>
          <t-form-item>
            <div style="width: 100%; text-align: center">
              <t-button theme="primary" type="submit" style="margin-right: 12px">保存</t-button>
              <t-button theme="default" variant="base" type="reset">取消</t-button>
            </div>
          </t-form-item>
        </t-form>
      </template>
    </t-dialog>
  </div>
</template>


<script>
import { MessagePlugin } from 'tdesign-vue';
import { LocationIcon, TimeIcon } from 'tdesign-icons-vue';
import SearchControlPanel from '@/pages/index/components/header-search/indexByTz.vue';
import api from '@/pages/index/api/gxzx/index';
export default {
  name: 'HomePage',
  components: { LocationIcon, TimeIcon, SearchControlPanel },

  data() {
    return {
      querySearchConfig: [
        {
          label: '企业名称',
          key: 'nsrmc',
          type: 'input',
          value: '',
          placeholder: '请输入',
          clearable: true,
        },
        {
          label: '统一社会信用代码',
          key: 'nsrsbh',
          type: 'input',
          value: '',
          placeholder: '请输入',
          clearable: true,
        },
        {
          label: '资产类型',
          key: 'zclxdm',
          type: 'select',
          value: '',
          selectList: [
            { value: 'ZC01', label: '绿电绿证' },
            { value: 'ZC02', label: '碳配额' },
            { value: 'ZC03', label: 'CCER' },
          ],
          placeholder: '请选择',
          clearable: true,
          isimport: true,
          filterable: true,
        },
      ],
      formData: { nsrmc: '', nsrsbh: '', zclxdm: '' },
      list: [],
      tableloading: true,
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      columns: [
        { align: 'center', colKey: 'serial-number', width: '80px', title: '序号' },
        { align: 'left', width: '120px', colKey: 'qymc', title: '企业名称', ellipsis: true },
        { align: 'left', width: '120px', colKey: 'zclxmc', title: '资产类型', ellipsis: true },
        { align: 'left', width: '120px', colKey: 'zcsl', title: '资产数量', ellipsis: true },
        { align: 'left', width: '120px', colKey: 'djStr', title: '资产单价', ellipsis: true },
        // { align: 'left', width: '120px', colKey: 'fbrq', title: '发布日期', foot: '', ellipsis: true },
        { align: 'left', width: '80px', colKey: 'yxqz', title: '有效期止', ellipsis: true },
        // { align: 'left', width: '100px', colKey: 'sjzt', title: '上架状态', foot: '', ellipsis: true },
        { align: 'left', width: '100px', colKey: 'cz', title: '操作', fixed: 'right', ellipsis: true },
      ],
      visible: false,
      shztOptions: [
        { value: '3', label: '通过' },
        { value: '4', label: '不通过' },
      ],
      row: {},
      addressData: {
        shjg1: '',
        shyj1: '',
      },
    };
  },
  created() {
    this.onQuery();
  },
  // computed: {
  //   pagination() {
  //     return {
  //       defaultCurrent: 1,
  //       defaultPageSize: 10,
  //       total: 0,
  //       onChange: (pageInfo) => {
  //         this.pagination.defaultCurrent = pageInfo.current;
  //         this.pagination.defaultPageSize = pageInfo.pageSize;
  //         this.onQuery();
  //       },
  //     };
  //   },
  // },

  methods: {
            onSubmit() {
      this.pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
      };
      this.onQuery();
    },
    shtc(row) {
      this.visible = true;
      this.getGxxx(row);
    },
    onReset1() {
      this.visible = false;
      this.row = {};
      this.addressData = {
        shjg1: '',
        shyj1: '',
      };
    },
    close() {
      this.visible = false;
      this.row = {};
      this.addressData = {
        shjg1: '',
        shyj1: '',
      };
    },
    async getGxxx(row) {
      // this.visible = true;
      try {
        const res = await api.queryZcxxxq(row.zcid);
        console.log('res', res);
        if (res.code == 1) {
          this.row = res.data;
        }
      } catch (error) {
        console.error('数据加载失败', error);
      }
    },
    async checkAddress() {
      // this.visible = true;
      let params = {
        uuid: this.row.zcid,
        ...this.addressData,
      };
      try {
        const res = await api.zcSp(params);
        console.log('res', res);
        if (res.code == 1) {
          MessagePlugin.info('审核成功');
          this.pagination = {
            current: 1,
            pageSize: 10,
            total: 0,
            showJumper: true,
          };

          this.visible = false;
        }
      } catch (error) {
        console.error('数据加载失败', error);
      } finally {
        // this.getCjjlPage();
        this.onQuery();
      }
    },
    async onPageChange(pageInfo) {
      console.log('onPageChange', pageInfo);
      this.pagination.current = pageInfo.current;
      this.pagination.pageSize = pageInfo.pageSize;
      this.onQuery();
    },
    onReset() {
      this.$message.success('重置成功');
      console.log('formData', this.formData);
    },
    async onQuery() {
      this.tableloading = true;
      const params = {
        module: 'sp',
        ...this.formData,
        pageNum: this.pagination.current,
        pageSize: this.pagination.pageSize,
      };
      try {
        const res = await api.queryZcxxList(params);
        this.list = res.data?.list || [];
        this.pagination.total = res.data?.total;
      } catch (err) {
        this.list = [];
        this.pagination.total = 0;
      } finally {
        this.tableloading = false;
      }
    },
    async changeSjzt(row) {
      if (row.sjzt == '1') {
        row.sjzt = '0';
      } else {
        row.sjzt = '1';
      }
      const params = { sjzt: row.sjzt, zcids: row.zcid };
      const res = await api.zcsxj(params);
      if (res) {
        this.onQuery();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.zj-page {
  padding: 24px;
}
.zj-page-search {
  padding: 24px;
  background: white;
  border-radius: 4px;
}

.t-table {
  width: 100%;
  padding: 8px;
}
/deep/.t-dialog__wrap .t-dialog {
  width: 40%;
  height: 50%;

  .t-form__label {
    width: 136px !important;
  }
}
.t-table /deep/ .t-input--suffix {
  width: 110px;
}
.form-text {
  color: #666;
}
.zj-page-table {
  width: 100%;
  min-height: 600px;
  padding: 16px;
  overflow: auto;
  background: white;
}
.search-width {
  width: 22%;
}
.margin-bottom12 {
  margin-bottom: 12px !important;
}
</style>