<template>
  <div class="container-body">
    <t-form
      ref="searchform"
      :data="formData"
      style="padding: 16px; background-color: #fff"
      label-width="calc(8em + 8px)"
      @submit="onQuery"
      @reset="onReset"
    >
      <div>
        <t-row :gutter="16">
          <t-col :span="3">
            <t-form-item label="发布时间起" name="fbsjq">
              <t-date-picker style="width: 100%" v-model="formData.fbsjq" clearable />
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label="发布时间止" name="fbsjz">
              <t-date-picker style="width: 100%" v-model="formData.fbsjz" clearable />
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <t-form-item label="内容" name="nr">
              <t-input v-model="formData.nr" placeholder="内容"></t-input>
            </t-form-item>
          </t-col>
          <t-col :span="3">
            <div style="width: 100%; margin-left: 16px; text-align: left">
              <t-space :size="12">
                <div class="czbtn"><t-button theme="default" type="reset">重置</t-button></div>
                <div class="czbtn"><t-button theme="primary" type="submit">查询</t-button></div>
              </t-space>
            </div>
          </t-col>
        </t-row>
      </div>
      <div class="search-line"></div>
    </t-form>
    <!-- <div class="py-4"><t-button theme="primary" @click="reactqyglxx()">新增</t-button></div> -->
    <div class="table-box" style="padding: 16px; background-color: #fff">
      <div class="table-toolbar">
        <t-button theme="primary" @click="handlePublish">发布需求</t-button>
      </div>
      <t-table
        class="add-edit-table"
        ref="tableRef"
        row-key="glid"
        :columns="columns"
        :scroll="{ type: 'horizontal' }"
        table-layout="fixed"
        :data="list"
        :pagination="pagination"
        hover
      >
        <template #sjzt="{ row }">
          <span>{{ row.sjzt == 'Y' ? '上架' : '下架' }}</span>
        </template>
        <template #ywlxDm="{ row }">
          <span>{{ row.ywlxDm == '01' ? '供给服务' : '需求服务' }}</span>
        </template>
        <template #cz="{ row }">
          <span variant="text" theme="primary" class="czBtn" @click="changeSjzt(row)">{{
            row.sjzt === 'Y' ? '下架' : '上架'
          }}</span>
        </template>
      </t-table>
    </div>

    <!-- 发布需求弹窗 -->
    <t-dialog
      :visible.sync="publishVisible"
      header="发布碳服务需求"
      :closeOnOverlayClick="true"
      :footer="false"
      width="600px"
      @close="onPublishClose"
      class="global-dialog"
    >
      <div class="publish-form">
        <t-form
          :rules="publishRules"
          :data="publishFormData"
          ref="publishFormRef"
          labelAlign="top"
        >
          <t-row :gutter="16">
            <t-col :span="12">
              <t-form-item label="需求标题" name="bt1">
                <t-input v-model="publishFormData.bt1" placeholder="请输入需求标题" clearable />
              </t-form-item>
            </t-col>
            <t-col :span="12">
              <t-form-item label="需求类型" name="fwlxjh">
                <t-select v-model="publishFormData.fwlxjh" :options="xqlxOptions" placeholder="请选择需求类型" clearable />
              </t-form-item>
            </t-col>
          </t-row>

          <t-row :gutter="16">
            <t-col :span="12">
              <t-form-item label="所属行业" name="sshy">
                <t-select v-model="publishFormData.sshy" :options="sshyDmOptions" placeholder="请选择所属行业" clearable />
              </t-form-item>
            </t-col>
            <t-col :span="12">
              <t-form-item label="预算范围" name="ysfwDm1">
                <t-select v-model="publishFormData.ysfwDm1" :options="ysfwDm1Options" placeholder="请选择预算范围" clearable />
              </t-form-item>
            </t-col>
          </t-row>

          <t-row :gutter="16">
            <t-col :span="12">
              <t-form-item label="期望完成时间" name="qwwcsj">
                <t-date-picker
                  v-model="publishFormData.qwwcsj"
                  placeholder="请选择期望完成时间"
                  style="width: 100%"
                  clearable
                />
              </t-form-item>
            </t-col>
            <t-col :span="12">
              <t-form-item label="服务地区" name="fwfw">
                <t-select v-model="publishFormData.fwfw" :options="fwfwOptions" placeholder="请选择服务地区" clearable />
              </t-form-item>
            </t-col>
          </t-row>

          <t-form-item label="需求详细描述" name="fwnr">
            <t-textarea v-model="publishFormData.fwnr" placeholder="请填写需求详细描述" :maxlength="100" />
          </t-form-item>

          <t-form-item label="标签" name="bqjh">
            <t-select
              v-model="publishFormData.bqjh"
              :max="4"
              :options="bqOptions"
              placeholder="请选择标签"
              multiple
              clearable
            />
          </t-form-item>

          <t-row :gutter="16">
            <t-col :span="8">
              <t-form-item label="联系人" name="lxr">
                <t-input v-model="publishFormData.lxr" placeholder="请输入联系人" />
              </t-form-item>
            </t-col>
            <t-col :span="8">
              <t-form-item label="联系电话" name="lxdh">
                <t-input v-model="publishFormData.lxdh" placeholder="请输入联系电话" />
              </t-form-item>
            </t-col>
            <t-col :span="8">
              <t-form-item label="电子邮箱" name="email">
                <t-input v-model="publishFormData.email" placeholder="请输入电子邮箱" />
              </t-form-item>
            </t-col>
          </t-row>
        </t-form>

        <div class="form-actions">
          <t-button theme="primary" type="button" @click="handlePublishSubmit">提交发布</t-button>
        </div>
      </div>
    </t-dialog>
  </div>
</template>


<script>
import { LocationIcon, TimeIcon } from 'tdesign-icons-vue';
import api from '../../api/gxzx/index';
export default {
  name: 'HomePage',
  components: { LocationIcon, TimeIcon },

  data() {
    return {
      formData: { ywlxDm: '02' },
      list: [],
      // 发布弹窗
      publishVisible: false,
      publishFormData: {
        bt1: '',
        fwlxjh: '',
        sshy: '',
        ysfwDm1: '',
        qwwcsj: '',
        fwfw: '',
        fwnr: '',
        bqjh: [],
        lxr: '',
        lxdh: '',
        email: '',
      },
      publishRules: {
        bt1: [{ required: true, message: '必填', type: 'error' }],
        fwlxjh: [{ required: true, message: '必填', type: 'error' }],
        sshy: [{ required: true, message: '必填', type: 'error' }],
        ysfwDm1: [{ required: true, message: '必填', type: 'error' }],
        qwwcsj: [{ required: true, message: '必填', type: 'error' }],
        fwfw: [{ required: true, message: '必填', type: 'error' }],
        fwnr: [{ required: true, message: '必填', type: 'error' }],
        lxr: [{ required: true, message: '必填', type: 'error' }],
        lxdh: [{ required: true, message: '必填', type: 'error' }],
      },
      xqlxOptions: [],
      sshyDmOptions: [],
      ysfwDm1Options: [],
      fwfwOptions: [],
      bqOptions: [],
      columns: [
        { align: 'center', colKey: 'serial-number', width: '80px', title: '序号' },
        { align: 'left', width: '120px', colKey: 'bt1', title: '标题', ellipsis: true },
        { align: 'left', width: '120px', colKey: 'fwlxjh', title: '服务类型', ellipsis: true },
        { align: 'left', width: '150px', colKey: 'sshy', title: '所属行业', ellipsis: true },
        { align: 'left', width: '120px', colKey: 'fwfw', title: '服务范围', foot: '', ellipsis: true },
        { align: 'left', width: '150px', colKey: 'fwnr', title: '服务描述', ellipsis: true },
        { align: 'left', width: '120px', colKey: 'kzwj', title: '扩展文件', ellipsis: true },
        { align: 'left', width: '100px', colKey: 'lxr', title: '联系人', ellipsis: true },
        { align: 'left', width: '120px', colKey: 'lxdh', title: '联系电话', foot: '', ellipsis: true },
        { align: 'left', width: '150px', colKey: 'email', title: '电子邮箱', ellipsis: true },
        { align: 'left', width: '120px', colKey: 'bqjh', title: '标签合集', foot: '', ellipsis: true },
        { align: 'left', width: '80px', colKey: 'zt', title: '状态', ellipsis: true },
        { align: 'left', width: '120px', colKey: 'lrrq', title: '录入日期', foot: '', ellipsis: true },
        { align: 'left', width: '100px', colKey: 'sjzt', title: '上架状态', foot: '', ellipsis: true },
        { align: 'left', width: '100px', colKey: 'ywlxDm', title: '业务类型', foot: '', ellipsis: true },
        { align: 'left', width: '120px', colKey: 'ysfwDm1', title: '预算范围', foot: '', ellipsis: true },
        { align: 'left', width: '150px', colKey: 'qwwcsj', title: '期望完成时间', foot: '', ellipsis: true },
        { align: 'left', width: '120px', colKey: 'xqjjcdDm', title: '需求紧急程度', foot: '', ellipsis: true },
        { align: 'left', width: '100px', colKey: 'cz', title: '操作', fixed: 'right', ellipsis: true },
      ],
    };
  },
  created() {
    this.onQuery();
  },
  computed: {
    pagination() {
      return {
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: 0,
        showJumper: true,
        onChange: (pageInfo) => {
          this.pagination.defaultCurrent = pageInfo.current;
          this.pagination.defaultPageSize = pageInfo.pageSize;
          this.onQuery();
        },
      };
    },
  },
  methods: {
    onReset() {
      this.$message.success('重置成功');
      console.log('formData', this.formData);
    },
    async onQuery() {
      const params = this.formData;
      const pageNumber = this.pagination.defaultCurrent;
      const pageSize = this.pagination.defaultPageSize;
      params.pageNumber = pageNumber;
      params.pageSize = pageSize;
      const res = await api.gxxxListByYh(params);
      this.list = res.data?.records || [];
      this.pagination.total = res.data?.total;
    },
    async changeSjzt(row) {
      let sjzt = '';
      if (row.sjzt == 'Y') {
        sjzt = 'N';
      } else {
        sjzt = 'Y';
      }
      const params = { sjzt, gxUuid: row.gxUuid };
      const res = await api.gxsj(params);
      if (res) {
        this.onQuery();
      }
    },
    // 加载代码表
    loadDmList() {
      this.xqlxoptionsSearch();
      this.sshyoptionsSearch();
      this.ysfwoptionsSearch();
      this.fwfwoptionsSearch();
      this.bqoptionsSearch();
    },
    async xqlxoptionsSearch() {
      try {
        const res = await api.dms2mc('xqlx', {});
        this.xqlxOptions = res.data || [];
      } catch (error) {
        this.xqlxOptions = [];
      }
    },
    async sshyoptionsSearch() {
      try {
        const res = await api.dms2mc('sshy', {});
        this.sshyDmOptions = res.data || [];
      } catch (error) {
        this.sshyDmOptions = [];
      }
    },
    async ysfwoptionsSearch() {
      try {
        const res = await api.dms2mc('ysfw', {});
        this.ysfwDm1Options = res.data || [];
      } catch (error) {
        this.ysfwDm1Options = [];
      }
    },
    async fwfwoptionsSearch() {
      try {
        const res = await api.dms2mc('xzqh', {});
        this.fwfwOptions = res.data || [];
      } catch (error) {
        this.fwfwOptions = [];
      }
    },
    async bqoptionsSearch() {
      try {
        const res = await api.dms2mc('bq', {});
        this.bqOptions = res.data || [];
      } catch (error) {
        this.bqOptions = [];
      }
    },
    // 打开发布弹窗
    handlePublish() {
      this.publishVisible = true;
      this.loadDmList();
    },
    handlePublishSubmit() {
      this.$refs.publishFormRef.validate().then((result) => {
        if (result === true) {
          this.submitGxfb();
        } else {
          this.$message.warning('请填写全部必填信息');
        }
      });
    },
    async submitGxfb() {
      try {
        let params = {
          ywlxDm: '02',
          ...this.publishFormData,
        };
        if (params.bqjh && params.bqjh.length) {
          params.bqjh = params.bqjh.toString();
        }
        await api.gxfb(params);
        this.$message.success('发布成功，请等待审核');
        this.publishVisible = false;
        this.resetPublishForm();
        this.onQuery();
      } catch (error) {
        console.error('发布失败', error);
      }
    },
    resetPublishForm() {
      this.publishFormData = {
        bt1: '',
        fwlxjh: '',
        sshy: '',
        ysfwDm1: '',
        qwwcsj: '',
        fwfw: '',
        fwnr: '',
        bqjh: [],
        lxr: '',
        lxdh: '',
        email: '',
      };
    },
    onPublishClose() {
      this.publishVisible = false;
      this.resetPublishForm();
    },
  },
};
</script>
<style lang="less" scoped>
.container-body {
  height: calc(100vh - 64px);
  padding: 24px;
  background: #ecf1f9;
}
/deep/ .t-table__header tr th{
  font-size: 14px;
    font-weight: 700;
    color: #3d3d3d !important;

}
/deep/ .t-table__header tr{
      background-color: #f9fafb !important;
}
/deep/ .t-table__content{
  border: 1px solid #bdbdbd66;
}
.table-toolbar {
  margin-bottom: 16px;
}
.publish-form {
  padding: 0 8px;
}
.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;

  .t-button {
    width: 200px;
  }
}
</style>