<template>
  <!-- 发布服务抽屉 -->
  <t-drawer
    :visible.sync="drawerVisible"
    header="发布碳服务供给"
    size="600px"
    :closeOnOverlayClick="false"
    :onClose="onClose"
    class="global-drawer"
  >
    <div class="publish-form">
      <t-form
        :rules="rules"
        :data="formData"
        ref="form"
        labelAlign="top"
        @submit="submitForm"
      >
        <t-row :gutter="16">
          <t-col :span="12">
            <t-form-item label="服务标题" name="bt1">
              <t-input v-model="formData.bt1" placeholder="请输入服务标题" clearable />
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item label="服务类型" name="fwlxjh">
              <t-select
                v-model="formData.fwlxjh"
                :max="4"
                :options="fwlxOptions"
                placeholder="请选择服务类型"
                multiple
                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="formData.sshy" :options="sshyDmOptions" placeholder="请选择所属行业" clearable />
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item label="服务地区" name="fwfw">
              <t-select v-model="formData.fwfw" :options="fwfwOptions" placeholder="请选择服务地区" clearable />
            </t-form-item>
          </t-col>
        </t-row>

        <t-row :gutter="16">
          <t-col :span="12">
            <t-form-item label="价格" name="gjjg">
              <t-input v-model="formData.gjjg" :disabled="ismy" placeholder="请输入价格" clearable />
              <t-radio style="width: 80px; margin-left: 8px" allowUncheck v-model="ismy" @click="ismyChange">面议</t-radio>
            </t-form-item>
          </t-col>
          <t-col :span="12">
            <t-form-item label="单位" name="gjdwDm">
              <t-select v-model="formData.gjdwDm" :disabled="ismy" :options="gjdwdmOptions" placeholder="请选择单位" clearable />
            </t-form-item>
          </t-col>
        </t-row>

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

        <t-form-item label="标签" name="bqjh">
          <t-select
            v-model="formData.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="formData.lxr" placeholder="请输入联系人" />
            </t-form-item>
          </t-col>
          <t-col :span="8">
            <t-form-item label="联系电话" name="lxdh">
              <t-input v-model="formData.lxdh" placeholder="请输入联系电话" />
            </t-form-item>
          </t-col>
          <t-col :span="8">
            <t-form-item label="电子邮箱" name="email">
              <t-input v-model="formData.email" placeholder="请输入电子邮箱" />
            </t-form-item>
          </t-col>
        </t-row>
      </t-form>

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

<script>
import api from '@/pages/index/api/fwsc/index.js';

export default {
  name: 'FwscPublish',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      drawerVisible: false,
      ismy: false,
      formData: {
        bt1: '',
        fwlxjh: '',
        sshy: '',
        gjjg: '',
        gjdwDm: '',
        fwfw: '',
        fwnr: '',
        bqjh: [],
        lxr: '',
        lxdh: '',
        email: '',
      },
      rules: {
        bt1: [{ required: true, message: '必填', type: 'error' }],
        fwlxjh: [{ required: true, message: '必填', type: 'error' }],
        sshy: [{ 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' }],
      },
      fwlxOptions: [],
      sshyDmOptions: [],
      fwfwOptions: [],
      bqOptions: [],
      gjdwdmOptions: [],
    };
  },
  watch: {
    visible(val) {
      this.drawerVisible = val;
      if (val) {
        this.loadDmList();
      }
    },
    drawerVisible(val) {
      this.$emit('update:visible', val);
    },
  },
  methods: {
    loadDmList() {
      this.fwlxoptionsSearch();
      this.sshyoptionsSearch();
      this.fwfwoptionsSearch();
      this.bqoptionsSearch();
      this.gjdwdmoptionsSearch();
    },
    async fwlxoptionsSearch() {
      try {
        const res = await api.dms2mc('fwlx', {});
        this.fwlxOptions = res.data || [];
      } catch (error) {
        this.fwlxOptions = [];
      }
    },
    async sshyoptionsSearch() {
      try {
        const res = await api.dms2mc('sshy', {});
        this.sshyDmOptions = res.data || [];
      } catch (error) {
        this.sshyDmOptions = [];
      }
    },
    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 = [];
      }
    },
    async gjdwdmoptionsSearch() {
      try {
        const res = await api.dms2mc('dw', {});
        this.gjdwdmOptions = res.data || [];
      } catch (error) {
        this.gjdwdmOptions = [];
      }
    },
    ismyChange() {
      this.ismy = !this.ismy;
      if (this.ismy) {
        this.formData.gjjg = '';
        this.formData.gjdwDm = '';
      }
    },
    handleSubmit() {
      this.$refs.form.validate().then((result) => {
        if (result === true) {
          this.gxfb();
        } else {
          this.$message.warning('请填写全部必填信息');
        }
      });
    },
    async gxfb() {
      try {
        let prame = {
          ywlxDm: '01',
          ...this.formData,
        };
        if (prame.bqjh && prame.bqjh.length) {
          prame.bqjh = prame.bqjh.toString();
        }
        if (prame.fwlxjh && prame.fwlxjh.length) {
          prame.fwlxjh = prame.fwlxjh.toString();
        }
        await api.gxfb(prame);
        this.$message.success('发布成功，请等待审核');
        this.drawerVisible = false;
        this.resetForm();
        this.$emit('success');
      } catch (error) {
        console.error('发布失败', error);
      }
    },
    resetForm() {
      this.formData = {
        bt1: '',
        fwlxjh: '',
        sshy: '',
        gjjg: '',
        gjdwDm: '',
        fwfw: '',
        fwnr: '',
        bqjh: [],
        lxr: '',
        lxdh: '',
        email: '',
      };
      this.ismy = false;
    },
    onClose() {
      this.drawerVisible = false;
      this.resetForm();
    },
    submitForm() {
      // handled by handleSubmit
    },
  },
};
</script>

<style lang="less" scoped>
.publish-form {
  padding: 0 8px;
}

.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 30px;

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