<template>
  <div class="">
    <el-form ref="ref_form" :inline="false" :model="formData" :rules="dataRule" label-width="118px">
      <el-form-item label="办理情况" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="content">
        <div :class="{ 'visiual-form': source === 'visiual' }">
          <el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入办理情况"
            v-model.trim="formData.content">
          </el-input>
        </div>
      </el-form-item>

      <el-form-item label="上传录音" label-width="118px" :class="{ 'form-item': source === 'visiual' }" >
        <el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr"
          :data="{ customerId: customerId }" :show-file-list="true" :on-success="handleAudioSuccess"
          :on-remove="handleAudioRemove" :before-upload="beforeAudioUpload">
          <i v-if="source === 'manage'" :class="['el-icon-plus']"></i>
          <img v-else style="width: 27px; height: 27px" src="@/assets/img/file-add.png" />
        </el-upload>
      </el-form-item>
      <el-form-item label="上传图片" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="files">
        <el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr"
          :data="{ customerId: customerId }" :show-file-list="true" :on-success="handleImgSuccess"
          :on-remove="handleImgRemove" :before-upload="beforeImgUpload">
          <i v-if="source === 'manage'" :class="['el-icon-plus']"></i>
          <img v-else style="width: 27px; height: 27px" src="@/assets/img/file-add.png" />
        </el-upload>
      </el-form-item>
      <el-divider></el-divider>
      <div class="flex">
        <div class="item">
          <el-form-item label="答复人" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="respondent">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="input" class="item_width_4" :rows="2" placeholder="请输入" v-model.trim="formData.respondent">
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="答复电话" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="respondentPhone">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="input" class="item_width_4" :rows="2" placeholder="请输入" v-model.trim="formData.respondentPhone">
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="联系人" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="contacts">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="input" class="item_width_4" :rows="2" placeholder="请输入" v-model.trim="formData.contacts">
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="联系电话" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="contactsPhone">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="input" class="item_width_4" :rows="2" placeholder="请输入" v-model.trim="formData.contactsPhone">
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label-width="118px" label="填报不合规诉求">
            <el-select v-model.trim="formData.irregularity" clearable class="item_width_4">
              <el-option v-for="item in binaryOptionListReverse" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item" v-if="formData.irregularity === 0">
          <el-form-item label-width="118px" label="不合规诉求类型">
            <el-select v-model.trim="formData.irregularity" clearable class="item_width_4">
              <el-option v-for="item in nonComplianceType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="办理真实度" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="verified">
            <el-select v-model.trim="formData.verified" clearable class="item_width_4">
              <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="flex">
        <div class="item">
          <el-form-item label="回访人" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="returnVisitor">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="input" class="item_width_4" :rows="2" placeholder="请输入"
                v-model.trim="formData.returnVisitor">
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="回访时间" prop="returnTime" label-width="118px"
            :class="{ 'form-item': source === 'visiual' }" style="display: block">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-date-picker v-model.trim="formData.returnTime" class="cell-width-1" type="datetime"
                placeholder="请选择" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="当事人联系不上" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="loseContact">
            <el-select v-model.trim="formData.loseContact" clearable class="item_width_4">
              <el-option v-for="item in contactList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="未接通电话" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="putThrough">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-select v-model.trim="formData.putThrough" clearable class="item_width_4">
                <el-option v-for="item in contactFailureList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="是否配合回访" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="mmm">
            <el-select v-model.trim="formData.mmm" clearable class="item_width_4">
              <el-option v-for="item in coordinateList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="服务过程满意度" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="nnn">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-select v-model.trim="formData.nnn" clearable class="item_width_4">
                <el-option v-for="item in satisfactionType" :key="item.value" :label="item.label" :value="item.value"
                  @click.native="handelChangeSatisfaction(item.value)">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="不满意原因" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="dissatisfyReason">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-select v-model.trim="formData.dissatisfyReason" clearable class="item_width_4">
                <el-option v-for="item in noSatisfactionType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>

        <div class="item">
          <el-form-item label="回访意见" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="visitComments">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入"
                v-model.trim="formData.visitComments">
              </el-input>
            </div>
          </el-form-item>
        </div>
      </div>
      <el-divider></el-divider>
      <div :class="['process-title', { 'process-title-vis': source === 'visiual' },]" v-if="pageType === 'check'">
        <img src="../../../../../assets/images/index/title-icon-chuli.png" width="30px" height="30px" alt="">
        审核
      </div>
      <div class="flex">
        <div class="item">
          <el-form-item label="审核结果" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="examine">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              
              <el-select v-model.trim="formData.examine" clearable class="item_width_4">
                <el-option v-for="item in examineList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="上传图片" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="files">
            <el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr"
              :data="{ customerId: customerId }" :show-file-list="true" :on-success="handleImgSuccess"
              :on-remove="handleImgRemove" :before-upload="beforeImgUpload">
              <i v-if="source === 'manage'" :class="['el-icon-plus']"></i>
              <img v-else style="width: 27px; height: 27px" src="@/assets/img/file-add.png" />
            </el-upload>
          </el-form-item>
        </div>
        <div :span="24">
          <el-form-item label="审核结果说明" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="examineContent">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入审核结果说明"
                v-model.trim="formData.examineContent">
              </el-input>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";
import { binaryOptionList, nonComplianceType, satisfactionType, noSatisfactionType,binaryOptionListReverse } from "@/js/columns/constants";
let loading; // 加载动画
function iniFmData() {
  return {
    operationType: "11", //处理方式[11已办结,10办理中,9联系当事人]
    eventId: '',
    content:'',//办理情况
    files: [],//附件
    respondent:'',//答复人
    respondentPhone:'',//答复人电话
    contacts:'',//联系人
    contactsPhone:'',//联系人电话
    irregularity:'',//填报不合规诉求 0：是 1：否
                    //不合规诉求类型
    verified: '', //办理真实度是否属实 0：属实 1：不属实
    returnVisitor: '',//回访人
    returnTime: '',//回访时间
    loseContact: '',//当事人联系不上0：已联系  1：未取得联系
    putThrough:'',//接通电话 0：接通  1：未接通
    mmm:'',//是否配合回访0：配合  1：不配合
    nnn: '',//0：满意  1：非常满意  2：不满意
    dissatisfyReason: '',//不满意原因
    visitComments: '',//回访意见
    examine:null,//审核结果
    examineContent:''//审核说明
  };
}
export default {
  data() {
    return {
      binaryOptionList,
      nonComplianceType,
      satisfactionType,
      noSatisfactionType,
      binaryOptionListReverse,
      customerId: localStorage.getItem("customerId"),
      assistanceUnitList: [], //协办单位数组
      formData: iniFmData(),
      okflag: false,
      uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
      eventDetailCopy: {},
      selectList: [{ label: '属实', value: 0 }, { label: '不属实', value: 1 }],
      contactList: [{ label: '已联系', value: 0 }, { label: '未联系', value: 1 }],
      contactFailureList: [{ label: '已接通', value: 1 }, { label: '未接通', value: 0 }],
      coordinateList: [{ label: '配合', value: 0 }, { label: '未配合', value: 1 }],
      examineList: [{ label: '合格', value: 0 }, { label: '不合格', value: 1 }],
      dataRule: {
        content: [
          { required: true, message: "办理情况不能为空", trigger: "blur" },
        ],
        verified: [
          { required: true, message: "办理真实度不能为空", trigger: "blur" },
        ],
        returnVisitor: [
          { required: true, message: "回访人不能为空", trigger: "blur" },
        ],
        returnTime: [
          { required: true, message: "回访时间不能为空", trigger: "blur" },
        ],
        loseContact: [
          { required: true, message: "请选择当事人联系不上", trigger: "blur" },
        ],
        putThrough: [
          { required: true, message: "请选择未接通电话", trigger: "blur" },
        ],
        visitComments: [
          { required: true, message: "回访意见不能为空", trigger: "blur" },
        ],
        mmm: [
          { required: true, message: "请选择是否配合回访", trigger: "blur" },
        ],
        nnn: [
          { required: true, message: "请选择服务过程满意度", trigger: "blur" },
        ],
      }
    };
  },
  components: {},
  computed: {
  },
  props: {
    eventId: {
      type: String,
      default: "",
    },
    eventDetailData: {
      type: Object,
      default() {
        return {};
      },
    },
    pageType: {
      type: String,
      default: "",
    },
    source: {
      //展示来源：manage  管理平台    visiual  可视化平台
      type: String,
      default: "manage",
    },
  },
  watch: {},
  created() { },

  mounted() {
    const { user } = this.$store.state;
    this.agencyId = user.agencyId;
  },

  methods: {
    handelChangeSatisfaction(val) {
      console.log(val);
      if (val === 2) {
        this.$set(this.dataRule, 'dissatisfyReason', [{ required: true, message: "请选择不满意原因", trigger: "blur" }]);
      } else {
        this.$delete(this.dataRule, 'dissatisfyReason');
      }
    },
 
    beforeAudioUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 10;
      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isLt1M;
    },
    handleAudioSuccess(res, file, fileList) {
      console.log("res.data.url", file);
      if (res.code === 0 && res.msg === "success") {
        console.log("res.data.url", res.data.url);
        this.formData.yinpin.push({
          format: file.name.split(".").pop(),
          name: file.name,
          size: file.size,
          type: file.raw.type,
          url: res.data.url,
        });
        console.log(this.formData.files);
      } else {
        this.$message.error(res.msg);
      }
    },

    handleAudioRemove(file) {
      let index = this.formData.yinpin.findIndex(
        (item) => item.url == file.response.data.url
      );
      this.formData.files.splice(index, 1);
      console.log(this.formData.files);
    },
    beforeImgUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 10;

      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isLt1M;
    },
    handleImgSuccess(res, file, fileList) {
      console.log("res.data.url", file);
      if (res.code === 0 && res.msg === "success") {
        console.log("res.data.url", res.data.url);
        this.formData.files.push({
          format: file.name.split(".").pop(),
          name: file.name,
          size: file.size,
          type: file.raw.type,
          url: res.data.url,
        });
        console.log(this.formData.files);
      } else {
        this.$message.error(res.msg);
      }
    },

    handleImgRemove(file) {
      let index = this.formData.files.findIndex(
        (item) => item.url == file.response.data.url
      );
      this.formData.files.splice(index, 1);
      console.log(this.formData.files);
    },
    async getReplayInfo() {
      this.okflag = false;
      this.$refs["ref_form"].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj);
        } else {
          this.okflag = true;
        }
      });
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/modules/shequzhili/project-info.scss" scoped></style>

<style lang='scss' scoped>
@import "@/assets/scss/modules/visual/a_customize.scss";
@import "@/assets/scss/modules/shequzhili/event-info.scss";
</style>
<style scoped>
.el-dialog__body {
  padding: 0 10px 20px !important;
}
</style>
