<template>
  <div class="withinLine">
    <el-button type="primary" size="mini" @click="open">{{ resultCodeName }}</el-button>
    <el-dialog title="" width="750px" custom-class="diy-dialog" append-to-body :modal="true" :visible.sync="formDialog"
      :show-close="true" :close-on-click-modal="false" :modal-append-to-body="false" :before-close="formCancel">
      <zj-form-container v-if="formDialog" ref="formRef" :form-data="formData" :styleSwitch="false">
        <zj-form-module :title="resultCodeName" label-width="140px" :showPackUp="false" :form-data="formData"
          :form-items="formItems">
        </zj-form-module>
      </zj-form-container>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="formCancel">取 消</el-button>
        <el-button size="mini" :disabled="disabled" @click="formConfirm" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import buttonMixin from './button_mixin.js'
import ImageUpload from '@/components/file-upload'
import { required } from '@/components/template/rules_verify.js'
import { orderBaseLogAdd } from "@/api/workOrderPool.js"
export default {
  mixins: [buttonMixin],
  components: {
    ImageUpload
  },
  props: {
    resultCode: {
      type: String,
      default: ''
    },
    resultCodeName: {
      type: String,
      default: '过程反馈'
    }
  },
  data() {
    return {
      type: this.resultCode ? [this.resultCode] : ['其他', '预约', '改约', '异常反馈', '完工反馈', '回访'],
      formDialog: false,
      formData: {
        "orderBaseId": this.orderInfo.id,
        "imgSrc": [],
        "content": "",
        "appointmentTime": "",
        "type": this.resultCode,
        "typeText": this.resultCode
      },
      formRules: {

      },
    }
  },
  computed: {
    // 用户信息
    userInfo() {
      return JSON.parse(localStorage.getItem('greemall_user'))
    },
    formItems() {
      return [{
        md: 24,
        name: 'el-radio',
        options: this.type.map(item => ({ label: item, value: item })),
        attributes: {},
        formItemAttributes: {
          label: '反馈结果',
          prop: 'type',
          rules: [...required]
        },
        event: {
          change: (val) => {
            this.formData.typeText = this.formData.type
          }
        }
      }, {
        name: 'el-date-picker',
        md: 12,
        isShow: !!~['预约', '改约'].indexOf(this.formData.type),
        attributes: {
          style: { width: '100%' },
          placeholder: '请选择',
          'value-format': 'yyyy-MM-dd HH:mm:ss',
          'picker-options': {
            disabledDate: time => {
              return time.getTime() < (Date.now() - 86400000)
            }
          }
        },
        formItemAttributes: {
          label: '预约日期',
          prop: 'appointmentTime',
          rules: [...required]
        }
      }, {
        md: 24,
        name: 'el-input',
        attributes: { placeholder: '请输入', type: "textarea" },
        formItemAttributes: {
          label: '反馈内容',
          prop: 'content',
          rules: !~['预约', '改约', '完工反馈', '回访'].indexOf(this.formData.type) ? [...required] : []
        }
      }, {
        md: 24,
        name: 'slot-component',
        formItemAttributes: {
          label: '上传图片(最多6个)',
          prop: 'imgSrc',
          rules: []
        },
        render: (h, { props, onInput }) => {
          return (
            <ImageUpload fileList={this.formData.imgSrc} limit={6} fileType={["image"]}/>
          )
        }
      }]
    }
  },
  methods: {
    open() {
      this.formDialog = true
    },
    formCancel() {
      this.formDialog = false
      this.formData = {
        "orderBaseId": this.orderInfo.id,
        "imgSrc": [],
        "content": "",
        "appointmentTime": "",
        "type": this.resultCode,
        "typeText": this.resultCode
      }
    },
    formConfirm() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.lockBtn()
          orderBaseLogAdd({
            ...this.formData,
            imgSrc: this.formData.imgSrc.map(item => item.url).join(",")
          }).then(res => {
            this.unlockBtn()
            // 编辑保存后不跳转列表，刷新数据
            this.acquireVerify(this, 'getorderDetail')()
            // 刷新操作记录
            this.acquireVerify(this, 'getOrderBaseLogList')()
            this.$message({
              type: 'success',
              message: '反馈成功'
            })
            this.formCancel()
          }).catch(() => {
            this.unlockBtn()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

.xijiezhanshi {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.withinLine {
  display: inline-block;

  ::v-deep .el-button {
    margin-left: 0;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
