<!-- 民意征集管理详情 -->
<template>
  <xn-form-container :title="'基本设置'" :width="800" :visible="visible" :destroy-on-close="true" @close="onClose">
    <a-form :model="formState" ref="formStateRef" name="basic" autocomplete="off">
      <div class="form">
        <a-row>
          <a-col :span="12">
            <a-form-item class="form-item" label="征集标题" name="collectionTitle"
              :rules="[{ required: true, message: '请输入征集标题!', trigger: 'blur' }]" :label-col="{ span: 10 }">
              <a-input placeholder="请输入" style="width: 620px" :disabled="disabled"
                v-model:value="formState.collectionTitle" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item class="form-item" label="开始时间" name="startTime" :label-col="{ span: 10 }">
              <a-date-picker show-time :disabled="disabled" v-model:value="formState.startTime"
                valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 250px" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item class="form-item" label="结束时间" name="endTime" :label-col="{ span: 10 }">
              <a-date-picker show-time :disabled="disabled" v-model:value="formState.endTime"
                valueFormat="YYYY-MM-DD HH:mm:ss" style="width: 250px" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item class="form-item" label="征集部门" name="ioDepartmentFunctionId" :label-col="{ span: 10 }">
              <a-select :disabled="disabled" style="width: 250px" v-model:value="formState.ioDepartmentFunctionId">
                <!-- <a-select-option :value="0">无效</a-select-option> solicitationList -->
                <a-select-option v-for="(item, index) in solicitationList" :key="item.ioDepartmentFunctionId"
                  :value="item.ioDepartmentFunctionId">{{ item.departmentName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <!--  -->
      </div>
      <div class="attachment"></div>
      <!-- 头条内容 -->
      <div class="bulletin-board"><span style="color: red">* </span>公告内容</div>
      <a-form-item class="form-item" label="''" ref="EditorRef" name="announcementContent" :label-col="{ span: 0 }"
        :rules="[{ required: true, message: '请输入公告内容!', trigger: 'blur' }]">
        <Editor @getTXTLE="getTXTLEDEL" :fileUploadFunction="global.uploadFile" :placeholder="'请输入公告内容'"
          :disabled="disabled" v-model:modelValue="formState.announcementContent" />
      </a-form-item>
      <div class="attachment">
        <a-form-item ref="uploadDataList" class="form-item" label="附件上传" name="attachments">
          <DIYUPLoad :beforeUpload="beforeUpload" multiple :disabled="disabled" :change="changeUpload"
            listType="picture-card" v-model:urls="formState.attachments"></DIYUPLoad>
        </a-form-item>
      </div>
      <!-- 意见征集 -->
      <div class="view-box" v-if="solicitationCollectList.length > 0">
        <p class="view-title"><span class="view-text">{{ '意见审核' }}</span> <span class="text"> (共有<span class="data-li">{{
          solicitationCollectList.length
        }}</span>人提出意见)</span></p>
        <div class="view-content">
          <div class="box-title" v-for="(item, index) in solicitationCollectList" :key="item.id">
            <!-- <div class="title-name">
              <div style="width: 142px;display: flex;">
                <p class="text-box">{{ '姓名：' }}</p>
                <p class="nick-box">{{  }}</p>
              </div>
            </div> -->
            <div style="display: flex;">
              <div style="width: 80%;">
                <div class="title-name">
                  <p class="text-box">【{{ item.nickname }}】</p>
                  <p class="nick-box">{{ item.content }}</p>
                </div>
                <p style="padding-left: 8px;font-size: 16px;font-weight: 500;color: #9e9c9c;">{{ item.createTime.slice(0,
                  10) }}</p>
              </div>
              <div class="btn">
                <a-button :class="['adopt-btn', item.auditStatus === 1 ? 'sale-box' : 'purchase-box']"
                  @click="adopt(item)">通过</a-button>
                <a-button :class="['adopt-btn', item.auditStatus === 2 ? 'sale-box1' : 'purchase-box']" danger
                  @click="notApproved(item)">不通过</a-button>
              </div>
            </div>

          </div>
        </div>
      </div>
      <a-form-item>
        <div class="item-submit">
          <a-button class="btn1" :disabled="disabled" type="primary" @click="onFinish(1)">暂存</a-button>
          <a-button class="btn1" :disabled="disabled" @click="onFinish(2)">提交</a-button>
        </div>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
    </template>
  </xn-form-container>
</template>
<script lang="js">
import business from '@/api/interaction.info/solicitationApi.js'
import { ref } from 'vue'
import { cloneDeep } from 'lodash-es'
import { required } from '@/utils/formRules'
import global from '@/api/home/global.js'
export default {
  name: 'FromName',
  components: {},
  emits: ['change'],
  setup(props, { emit }) {
    const detailData = ref('')
    const disabled = ref(false)
    const visible = ref(false)
    const records = ref('')
    const onOpen = (record, flag, view, row) => {
      records.value = record
      visible.value = flag
      disabled.value = view
      if (row) {
        detailData.value = row.id
        detail(row.id)
      }
    }
    const solicitationList = ref([])
    const solicitationCollectList = ref([])
    // 查看数据
    const detail = async (v) => {
      const res = await business.collectDetail({ id: v })
      formState.value = res.icPublicOpinionCollect
      solicitationCollectList.value = res.icPublicOpinionCollectMessages //意见征集
      if (res.icPublicOpinionCollect.attachment) {
        formState.value.attachment = res.icPublicOpinionCollect.attachment.split(',')
      }
    }
    // 清除数据
    const rest = () => {
      for (let key in formState.value) {
        formState.value[key] = ''
      }
      solicitationCollectList.value = []
    }
    const onClose = () => {
      visible.value = false
      rest()
    }
    // 通过
    const adopt = (val) => {
      business.auditData({ id: val.id, auditStatus: 1 }).then((res) => {
        detail(detailData.value)
      })

    }
    //不通过
    const notApproved = (val) => {
      business.auditData({ id: val.id, auditStatus: 2 }).then((res) => {
        detail(detailData.value)
      })
    }

    watch(
      () => visible.value,
      (newVal) => {
        if (!newVal) {
          setTimeout(() => {
            rest()
          }, 0)
        }
        // 征集部门数据
        business.collectIoDepartment().then(res => {
          solicitationList.value = res.map(item => {
            return {
              departmentName: item.departmentName,
              ioDepartmentFunctionId: item.id
            }
          })
        })
      },
      { deep: true }
    )

    const formState = ref({
      collectionTitle: '',
      startTime: '',
      endTime: '',
      ioDepartmentFunctionId: '',
      attachments: '',
      status: 0
    })
    const uploadDataList = ref(null)
    const formStateRef = ref(null)

    const onFinish = async (status) => {
      formStateRef.value.validate().then(async () => {
        formState.value.status = status
        await handleAdd(formState.value)
        emit('change')
        rest()
        onClose()
        try {
          console.log(2)
        } catch (err) {
          console.log(err)
        }
      })
    }

    const handleAdd = async (val, status) => {
      if (Array.isArray(val.attachments)) {
        val.attachments = val.attachments.join(',')
      }
      if (records.value == 'edit') {
        const res = await business.collectEdit(val)
      } else {
        const res = await business.collectAdd(val)
      }
    }
    const delADD = () => {
      formStateRef.value.validate().then(() => { })
    }

    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo)
    }
    function changeUpload(fd) {
      return global.uploadFile(fd).then((reg) => {
        uploadDataList.value.clearValidate()
        return reg
      })
    }
    function beforeUpload() {
      uploadDataList.value.clearValidate()
    }
    const EditorRef = ref(null)
    const getTXTLEDEL = (v) => {
      if (v !== undefined || v !== null || v !== '') {
        EditorRef.value.clearValidate()
      }
    }

    return {
      getTXTLEDEL,
      EditorRef,
      delADD,
      beforeUpload,
      global,
      uploadDataList,
      changeUpload,
      formStateRef,
      formState,
      onFinish,
      onFinishFailed,
      disabled,
      onOpen,
      solicitationList,
      solicitationCollectList,
      visible,
      onClose,
      adopt,
      notApproved
    }
  }
}
</script>
<style lang="less" scoped>
.box1 {
  display: flex;
  justify-content: space-between;

  .box-left {
    width: 350px;
    align-items: center;
  }

  .box-right {
    width: 350px;
    margin-right: 10px;
    align-items: center;
  }
}

.common {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;

  .title {
    width: 130px;
    text-align: right;
    margin-right: 5px;
  }
}

.bulletin-board {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 14px;
}

.input {
  margin-right: 10px;
  margin-left: 40px;
  margin-top: 20px;

  .ant-input-affix-wrapper {
    height: 100px;
  }
}

.btnBox {
  text-align: center;
  margin-top: 100px;

  .snowy-buttom-left {
    margin-left: 100px;
  }

  .acc {
    width: 80px;
    height: 40px;
  }
}

.form {
  display: flex;
  flex-wrap: wrap;

  // justify-content: center;
  .form-item {
    width: 250px;
    margin-right: 120px;
  }
}

.item-submit {
  display: flex;
  justify-content: center;
  margin-top: 100px;

  .btn1 {
    width: 100px;
    margin-right: 20px;
  }
}

.ant-select {
  width: 250px;
}

.ant-input {
  width: 250px;
}

.ant-form-item-label {
  width: 150px;
}

.attachment {
  margin-top: 30px;
  font-size: 16px;
  font-weight: bold;
}

.view-box {
  height: 360px;

  .view-title {
    margin-bottom: 12px;

    .view-text {
      font-size: 22px;
      font-weight: bold;
    }
  }

  .view-content {
    height: calc(100% - 58px);
    overflow-y: auto;

    .box-title {
      color: #333;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 16px;

      .title-name {
        // height: 28px;
        display: flex;
        font-size: 16px;
        font-weight: 400;

        .text-box {
          margin: 0;
          height: 24px;
        }

        .nick-box {
          margin: 0;
          max-height: 300px;
          width: 80%;
        }
      }
    }
  }

  .data-li {
    color: red;
    font-weight: bold;
  }

  .btn {
    text-align: right;
    width: 23%;
  }

  .adopt-btn {
    margin-right: 10px;
    border-radius: 8px;
  }

  .sale-box {
    background-color: #4096ff;
    color: #fff;
  }

  .purchase-box {
    background-color: #fff;
    color: #333;
  }

  .sale-box1 {
    background-color: red;
    color: #fff;
  }

  /* 设置滚动条的样式 */
  .view-content::-webkit-scrollbar {
    width: 10px;
    box-sizing: border-box;
  }

  /* 滚动条滑块 */
  .view-content::-webkit-scrollbar-thumb {
    height: 5px;
    border-radius: 5px;
    background-color: #c2cede;
  }

  /*滚动槽*/
  .view-content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px #57a2e8;
    border-radius: 10px;
    background: #4b5563a3;
  }
}
</style>
