<template>
  <a-modal
    title="详情"
    width="60%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="null"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <div>
        <a-descriptions bordered :column="2">
          <a-descriptions-item label="状态" :span="2">
            <a-tag color="#f50" v-if="currentInfo.status === 1 || currentInfo.status === 5">
              {{ GetClientDataItem('shopstatus', currentInfo.status) }}</a-tag
            >
            <a-tag color="#1dbb1d" v-else-if="currentInfo.status === 2 || currentInfo.status === 6">
              {{ GetClientDataItem('shopstatus', currentInfo.status) }}</a-tag
            >
            <a-tag color="#b3b3b3" v-else> {{ GetClientDataItem('shopstatus', currentInfo.status) }}</a-tag>
            <a-popconfirm
              v-if="hasPerm('demand:status') && (currentInfo.status === 1 || currentInfo.status === 3)"
              placement="topRight"
              title="确定上架？"
              @confirm="() => setstatus(2)"
            >
              <a>上架</a>
            </a-popconfirm>
            <a-popconfirm
              v-if="hasPerm('demand:status') && currentInfo.status === 2"
              placement="topRight"
              title="确定下架？"
              @confirm="() => setstatus(1)"
            >
              <a>下架</a>
            </a-popconfirm>
            <a-popconfirm
              v-if="hasPerm('demand:status') && currentInfo.status === 4"
              placement="topRight"
              title="确定通过？"
              @confirm="() => setstatus(6)"
            >
              <a>通过</a>
            </a-popconfirm>
            <a-divider type="vertical" v-if="hasPerm('demand:status') && currentInfo.status === 4" />
            <a-popconfirm
              v-if="hasPerm('demand:status') && currentInfo.status === 4"
              placement="topRight"
              title="确定驳回？"
              @confirm="() => setstatus(5)"
            >
              <a>驳回</a>
            </a-popconfirm>
          </a-descriptions-item>
          <a-descriptions-item label="需求名称" :span="2">
            <span>{{ currentInfo.title }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="浏览数">
            <span>{{ currentInfo.browsecnt }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="点赞数">
            <span>{{ currentInfo.likecnt }}</span>
          </a-descriptions-item>
          <a-descriptions-item label="需求描述" :span="2">
            <span>{{ currentInfo.desc }}</span>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-spin>
    <previewimg ref="PreImg"></previewimg>
    <a-modal
      title="需求驳回"
      :visible="rejectvisible"
      :confirm-loading="rejectconfirmloading"
      @ok="rejectok"
      @cancel="rejectcancel"
    >
      <a-form :form="form">
        <a-form-item>
          <a-textarea
            :rows="4"
            placeholder="请输入驳回原因"
            type="number"
            addon-after="元"
            v-decorator="['statusremark', { rules: [{ required: true, message: '驳回原因不可为空' }] }]"
          ></a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-modal>
</template>

<script>
import { GetClientDataItem } from '@/utils/clientdata'
import previewimg from '@/views/components/previewimg'
import { SetStatus } from '@/api/modular/main/demand'
export default {
  components: {
    previewimg
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      currentInfo: {},
      rejectvisible: false,
      rejectconfirmloading: false,
      visible: false,
      confirmLoading: false,
      plist: [],
      form: this.$form.createForm(this)
    }
  },
  methods: {
    GetClientDataItem,
    // 初始化方法
    init(record) {
      this.visible = true
      this.currentInfo = record
      this.piclist()
    },
    piclist() {
      const list = this.currentInfo.pics !== '' ? this.currentInfo.pics.split(',') : []
      this.plist = list.map(item => {
        return process.env.VUE_APP_API_BASE_URL + item
      })
    },
    handleCancel() {
      this.visible = false
    },
    // 修改状态
    setstatus(status) {
      if (status === 5) {
        this.rejectvisible = true
        return
      }
      SetStatus({
        id: this.currentInfo.id,
        status: status
      })
        .then(res => {
          if (res.code === 0) {
            this.$message.success('状态设置成功')
            this.currentInfo.status = status
          } else {
            this.$myerror(res.message)
          }
        })
        .catch(err => {
          this.$myerror(err.message)
        })
    },
    rejectok(e) {
      const that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          this.rejectconfirmloading = true
          values['id'] = that.currentInfo.id
          values['status'] = 5
          SetStatus(values)
            .then(res => {
              if (res.code === 0) {
                this.$message.success('驳回成功')
                this.currentInfo.status = 5
              } else {
                this.$myerror(res.message)
              }
              this.rejectcancel()
            })
            .catch(err => {
              this.$myerror(err.message)
              this.rejectcancel()
            })
        }
      })
    },
    rejectcancel() {
      this.rejectvisible = false
      this.rejectconfirmloading = false
    }
  }
}
</script>
