﻿<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : isDetail ? '详情' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="NCC-dialog NCC-dialog_center dialog-box baseInspectionReportForm"
    lock-scroll
    width="50%"
    :modal="false"
  >
    <el-row v-loading="form_loading">
      <div style="color: #66b1ff;">{{ dataForm.disteport }}</div>
      <el-row :gutter="15" class="NCC-dialog-content" v-if="!isDetail">
        <el-form
        ref="elForm"
        :model="dataForm"
        size="small"
        label-width="100px"
        label-position="right"
        :disabled="!!isDetail"
        :rules="rules"
      >
        <el-col :span="24" v-if="false">
          <el-form-item label="主键" prop="id">
            <el-input v-model="dataForm.id" placeholder="请输入" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="问题来源" prop="reportSource">
            <el-radio-group v-model="dataForm.reportSource">
              <el-radio v-for="(item, index) in sourceOptions" :key="index" :label="item.Id">{{ item.FullName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="运营主体" prop="company">
            <CompanySelect v-model="dataForm.company" @change="(val, type) => companyChange(val, type)" :disabled="!!this.dataForm.id"></CompanySelect>
            <!-- <el-select
              ref="companySelect"
              v-model="dataForm.company"
              placeholder="请选择运营主体"
              clearable
              filterable 
              style="width: 100%"
              @blur.native.capture="selectCompanyBlur"
              @visible-change="visibleNameCompanyChange"
              @change="(val) => companyChange(val, 'change')"
              :disabled='!!this.dataForm.id'
              v-selectLoadMore="initCompanyList"
              :loading="name_loading"
              :teleported="false"
              :filter-method="filterMethod"
            >
              <el-option v-for="item in companyOptions.slice(0, company_currentPage)" :key="item.id" :label="item.companyName" :value="item.id"/>
            </el-select> -->
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="应用名称" prop="platformName">
            <el-select
              ref="select"
              v-model="dataForm.platformName"
              filterable
              remote
              reserve-keyword
              placeholder="请输入应用名称"
              @blur.native.capture="selectBlur"
              @visible-change="visibleNameChange"
              @change="(val) => platformNameChange(val, 'change')"
               v-selectLoadMore="moreSystemList"
              :teleported="false"
              :loading="system_loading"
              :disabled="!!this.dataForm.id || !dataForm.company">
              <el-option v-for="item in nameOptions.slice(0, system_currentPage)" :key="item.id" :label="item.systemName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="应用类型" prop="platformType">
            <el-radio-group v-model="dataForm.platformType" :disabled='!!this.dataForm.id'>
              <el-radio v-for="(item, index) in platformTypeOptions" :key="index" :label="item.Id">{{ item.FullName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- 办公地址address、联系人contactUser、联系电话contactPhone -->
        <el-col :span="24">
          <el-form-item label="办公地址" prop="address">
            <el-input v-model="dataForm.address" placeholder="请输入办公地址" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="联系人" prop="contactUser">
            <el-input v-model="dataForm.contactUser" placeholder="请输入联系人" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input v-model="dataForm.contactPhone" placeholder="请输入联系电话" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="dataForm.platformType == '580634746028033285'">
          <el-form-item label="归属平台" prop="selfMediaPlatformType">
            <el-radio-group v-model="dataForm.selfMediaPlatformType" :disabled="!!this.dataForm.id">
              <el-radio v-for="(item, index) in mediaPlatList" :key="index" :label="item" >{{ item }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="dataForm.selfMediaPlatformType == '其他'">
          <el-form-item label="其他归属平台" prop="selfMediaPlatformTypeOther">
            <el-input v-model="dataForm.selfMediaPlatformTypeOther" placeholder="请输入其他归属平台" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="问题类型" prop="questionType">
            <el-radio-group v-model="dataForm.questionType">
              <el-radio v-for="(item, index) in questionTypeOptions" :key="index" :label="item.id" >{{ item.fullName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="dataForm.questionType == '0'">
          <el-form-item label="其他问题类型" prop="otherQuestionType">
            <el-input v-model="dataForm.otherQuestionType" placeholder="请输入其他问题类型" clearable :style="{ width: '100%' }" />
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="dataForm.questionType == '584886326260663557'">
          <el-form-item label="正确描述" prop="accurateDescription">
            <el-input v-model="dataForm.accurateDescription" placeholder="请输入正确描述" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" v-show="dataForm.questionType == '584886326260663557'">
          <el-form-item label="错误描述" prop="incorrectDescription">
            <el-input v-model="dataForm.incorrectDescription" placeholder="请输入错误描述" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="问题内容" prop="questionContent">
            <el-input v-model="dataForm.questionContent" placeholder="请输入" show-word-limit :style="{ width: '100%' }" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="链接" prop="link">
            <el-input v-model="dataForm.link" placeholder="请输入链接" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="关键词" prop="questionClass">
            <el-input v-model="dataForm.questionClass" placeholder="请输入关键词" clearable :style="{ width: '100%' }"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="24" v-if="isSHILevel">
          <el-form-item label="处置建议" prop="judgmentOpinions">
            <el-input
              v-model="dataForm.judgmentOpinions"
              placeholder="请输入处置建议"
              show-word-limit
              :style="{ width: '100%' }"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              maxlength="200"
            >
            </el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="24" v-if="!isSHILevel">
          <el-form-item label="处置结果" prop="disposalSuggestions">
            <el-input
              v-model="dataForm.disposalSuggestions"
              placeholder="请输入处置结果"
              show-word-limit
              :style="{ width: '100%' }"
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              maxlength="200"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="附件" prop="annex">
            <NCC-UploadFz v-model="dataForm.annex" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" />
          </el-form-item>
        </el-col>
        </el-form>
      </el-row>
      <el-row v-else>
      <el-col class="form-item">
        <div class="label w-120">问题来源：</div>
        <div class="text">{{ dataForm.reportSourceName || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">应用名称：</div>
        <div class="text">{{ dataForm.platformNameStr || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">运营主体：</div>
        <div class="text">{{ dataForm.companyStr || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">应用类型：</div>
        <div class="text">{{ dataForm.platformTypeStr || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">办公地址：</div>
        <div class="text">{{ dataForm.address || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">联系人：</div>
        <div class="text">{{ dataForm.contactUser || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">联系电话：</div>
        <div class="text">{{ dataForm.contactPhone || '--' }}</div>
      </el-col>
      <el-col class="form-item" v-if="dataForm.platformType == '580634746028033285'">
        <div class="label w-120">归属平台：</div>
        <div class="text">{{ dataForm.selfMediaPlatformType || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">问题类型：</div>
        <div class="text">{{ dataForm.questionTypeStr || '--' }}</div>
      </el-col>
      <el-col class="form-item" v-show="dataForm.questionType == '584886326260663557'">
        <div class="label w-120">正确描述：</div>
        <div class="text">{{ dataForm.accurateDescription || '--' }}</div>
      </el-col>
      <el-col class="form-item" v-show="dataForm.questionType == '584886326260663557'">
        <div class="label w-120">错误描述：</div>
        <div class="text">{{ dataForm.incorrectDescription || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">问题内容：</div>
        <div class="text">{{ dataForm.questionContent || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">链接：</div>
        <div class="text">{{ dataForm.link || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">关键词：</div>
        <div class="text">{{ dataForm.questionClass || '--' }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">附件：</div>
        <div class="text" style="width: calc(100% - 120px);">
          <NCC-UploadFz v-model="dataForm.annex" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" disabled/>
        </div>
      </el-col>
      <!-- 研判类型 -->
      <el-col class="form-item">
        <div class="label w-120">研判类型：</div>
        <div class="text">{{ dataForm.state || "--" }}</div>
      </el-col>
      <el-col class="form-item">
        <div class="label w-120">所属区域：</div>
        <div class="text">{{ dataForm.areaName || "--" }}</div>
      </el-col>
      <el-col class="form-item" v-if="dataForm.externalAssistanceId">
        <div class="label w-120">所属外协：</div>
        <div class="text">外协一</div>
      </el-col>
      <el-col v-for="(v, i) in dataForm.judgmentOpinions" :key="i" style="border: #f6f6f6 solid 1px; border-radius: 10px; padding: 8px; margin-bottom: 5px;">
        <div class="title">研判信息{{ i + 1 }}</div>
        <div class="form-item">
          <div class="label w-120">处置类型：</div>
          <div class="text">{{ v.State }}</div>
        </div>
        <div class="form-item">
          <div class="label w-120">处置建议：</div>
          <div class="text">{{ v.judgmentOpinion }}</div>
        </div>
      </el-col>
      <el-col v-for="(v, i) in dataForm.disposalSuggestions" :key="i" style="border: #f6f6f6 solid 1px; border-radius: 10px; padding: 8px; margin-bottom: 5px;">
        <div class="title">处置信息{{ i + 1 }}</div>
        <div class="form-item">
          <div class="label w-120">处置结果：</div>
          <div class="text">{{ v.disposalSuggestion }}</div>
        </div>
        <div class="form-item" v-if="v.fileUrl">
          <div class="label w-120">处置附件：</div>
          <div class="text" style="width: calc(100% - 120px);">
            <NCC-UploadFz v-model="v.fileUrl" :fileSize="5" sizeUnit="MB" :limit="9" buttonText="点击上传" disabled/>
          </div>
        </div>
      </el-col>
      </el-row>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail" :loading="btnLoading">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { getDetail, addForm, updataForm } from "@/api/systemData/dataInterface";
import { dynamicText } from "@/filters/index";
import infoMixin from "@/mixins/info";
import { MediaPlatList } from "@/assets/data"
import { getInfoList } from "@/api/baseData/info";
export default {
  components: {},
  mixins: [infoMixin], 
  props: [],
  data() {
    return {
      loading: false,
      visible: false,
      name_loading: false,
      isDetail: false,
      form_loading: true,
      dataForm: {
        id: undefined,
        reportSource: undefined,
        platformNameStr: undefined,
        platformTypeStr: undefined,
        companyStr: undefined,
        platformName: '',
        selfMediaPlatformType: '',
        platformType: undefined,
        questionType: undefined, // 问题类型id
        questionClass: undefined,
        questionContent: undefined,
        link: undefined,
        accurateDescription: undefined,
        incorrectDescription: undefined,
        annex: [],
        otherQuestionType: undefined, // 其他问题类型名称
        selfMediaPlatformTypeOther: undefined,
        company: undefined,
        reportSourceName: undefined,
        judgmentOpinions: undefined,
        disposalSuggestions: undefined,
        address: undefined,
        contactUser: undefined,
        contactPhone: undefined,
        disteport: undefined,
        questionTypeStr: undefined
      },
      rules: {
        platformName: [
          { required: true, message: "请选择应用名称", trigger: "blur" },
        ],
        company: [
          { required: true, message: "请选择运营主体", trigger: "blur" },
        ],
        platformType: [
          { required: true, message: "请选择应用类型", trigger: "blur" },
        ],
        questionType: [
          { required: true, message: "请选择问题类型", trigger: "blur" },
        ],
        disposalSuggestions: [
          { required: true, message: "请填写处置结果", trigger: "blur" },
        ],
        contactPhone: [
					{
						pattern: /^1[3456789]\d{9}$|^0\d{2,3}-?\d{7,8}$/,
						message: '请输入正确的联系电话',
						trigger: 'blur'
					},
				],
        // otherQuestionType: [
        //   { required: true, message: "请输入其他问题类型", trigger: "blur" },
        // ],
      },
      sourceOptions: [],
      platformTypeOptions: [],
      questionTypeOptions: [
        { fullName: "存在有害信息", id: "577006944540165381" },
        { fullName: "内容审核不到位", id: "577006978564359429" },
        { fullName: "错误表述", id: "584886326260663557" },
        { fullName: "删除链接", id: "591435954770674949" },
        { fullName: "样本查删", id: "591436151911351557" },
      ],
      nameOptions: [], // 应用名称
      mediaPlatList: MediaPlatList,
      companyOptions: [],
      btnLoading: false,
      areaOptions: [],
      company_currentPage: 20,
      system_loading: false,
      system_currentPage: 20,
      system_loading: false,
    };
  },
  computed: {
    isDisabledTypeByName() {
      if(!this.nameOptions.length) return false;
      let index = this.nameOptions.findIndex(v => v.id == this.dataForm.platformName);
      return index != -1;
    },
    isSHILevel() {
      // 判断角色是否为‘市级办公室’
      return this.$store.state.user.islader;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    async initAllList() {
      //  let companyRes = await request({
      //   url: `/Extend/basecomapnyinfo/GetNoPagingList`,
      //   method: "GET",
      // });
      // this.companyOptions = companyRes.data;
      let SourceRes = await request({
        url: `/Extend/baseinspectionreport/GetReportSourceList`,
        method: "GET",
      });
      this.sourceOptions = SourceRes.data;
      let list = this.$store.state.meta.system;
      !list && (list = await this.$store.dispatch("getTypeListByCode", "system"));
      this.platformTypeOptions = list;
      await getDictionaryDataSelector("577006814432855301").then((res) => {
        this.questionTypeOptions = [...res.data.list, {id: '0', fullName: '其他'}];
      });
      // this.name_loading = true
      // this.name_loading = false;
    },
    // async initCompanyList() {
    //   if(this.company_currentPage > this.companyOptions.length) return;
    //   this.company_currentPage += 10;
    // },
    // async filterMethod(val) {
    //   this.company_currentPage = 20;
    //   this.name_loading = true
    //   let companyRes = await request({
    //     url: `/Extend/basecomapnyinfo/GetNoPagingList`,
    //     method: "GET",
    //     params: {
    //       companyName: val
    //     }
    //   });
    //   this.companyOptions = companyRes.data;
    //   this.name_loading = false;
    // },
    selectBlur(e) {
      let value = e.target.value;
      if(!value) return;
      this.dataForm.platformName = e.target.value;
      this.platformNameChange(value, 'blur');
    },
    platformNameChange(val, type) {
      let obj = this.nameOptions.find(v => type == 'blur' ? val == v.fullName : val == v.id);
      this.dataForm.platformName = obj ? obj.id : val;
      this.dataForm.platformType = obj ? this.platformTypeOptions.find(v => v.Id == obj.systemType || v.FullName == obj.systemType).Id : '';
      this.dataForm.address = obj ? obj.address : '';
      this.dataForm.contactUser = obj ? obj.contactUser : '';
      this.dataForm.contactPhone = obj ? obj.contactPhone : '';
      if(obj && this.dataForm.platformType == '580634746028033285') {
        if(this.mediaPlatList.findIndex(j => j == obj.selfMediaPlatformType) == -1) {
          this.dataForm.selfMediaPlatformType = '其他';
          this.dataForm.selfMediaPlatformTypeOther = obj.selfMediaPlatformType;
        } else {
          this.dataForm.selfMediaPlatformType = obj.selfMediaPlatformType;
        }
      }
    },
    visibleNameChange(val) {
      if (val) return
      let input = this.$refs.select.$children[0].$refs.input;
      input.blur();
    },
    async companyChange(val, type) {
      console.log(val, type);
      
      switch (type) {
        case 'change':
          let { data } = await request({
            url: `/Extend/basesysteminfo/GetNoPagingList`,
            method: "GET",
            params: { companyId: val }
          });
          if(!data) return;
          this.nameOptions = data;
          break;
        case 'blur':
          this.nameOptions == [];
          break;
        default:
          break;
      }
      this.dataForm.platformName = '';
      this.dataForm.platformType = '';
    },

    // // 运营主体改变
    // selectCompanyBlur(e) {
    //   let value = e.target.value;
    //   if(!value) return;
    //   this.dataForm.company = e.target.value;
    //   this.companyChange(value, 'blur');
    // },
    // async companyChange(val, type) {
    //   let obj = this.companyOptions.find(v => val == v.id);
    //   obj && await request({
    //     url: `/Extend/basesysteminfo/GetNoPagingList`,
    //     method: "GET",
    //     params: { companyId: val }
    //   }).then(({data}) => {
    //     if(!data) return;
    //     this.nameOptions = data;
    //   });
    //   if(!type) return;
    //   !obj && this.nameOptions == [];
    //   this.dataForm.platformName = '';
    //   this.dataForm.platformType = '';
    // },
    // visibleNameCompanyChange(val) {
    //   if (val) return
    //   let input = this.$refs.companySelect.$children[0].$refs.input;
    //   input.blur();
    // },
    loadList() {
      this.name_loading = true;
      request({
        url: `/Extend/basesysteminfo/GetNoPagingList`,
        method: "GET",
      }).then(({data}) => {
        this.nameOptions = data;
        this.name_loading = false;
      })
    },
    moreSystemList() {
      if(this.system_currentPage > this.nameOptions.length) return;
      this.system_currentPage += 10;
    },
    async getplatformTypeOptions() {
      let list = this.$store.state.meta.system;
      !list && (list = await this.$store.dispatch("getTypeListByCode", "system"));
      this.platformTypeOptions = list;
    },
    async getSourceOptions() {
      let { data } = await request({
        url: `/Extend/baseinspectionreport/GetReportSourceList`,
        method: "GET",
      });
      this.sourceOptions = data;
    },
    async getquestionTypeOptions() {
      getDictionaryDataSelector("577006814432855301").then((res) => {
        this.questionTypeOptions = [...res.data.list, {Id: '0', fullName: '其他'}];
      });
    },
    goBack() {
      this.$emit("refresh");
    },
    async init(id, isDetail) {
      this.dataForm.id = id || '';
      this.visible = true;
      this.isDetail = isDetail || false;
      this.form_loading = true;
      this.btnLoading = false;
      await this.initAreaTypeList();
      await this.initAllList();
      this.$nextTick(async () => {
        !isDetail && this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.form_loading = true;
          let res = await getDetail(this.dataForm.id);
          await this.companyChange(res.data.company, 'change');
          if(res.code != 200) return this.form_loading = false;
          if(!res.data) return;
          this.dataForm = res.data;
          if(!this.isDetail && Array.isArray(this.dataForm.disposalSuggestions)) {
            let disposalSuggestions = this.dataForm.disposalSuggestions;
            this.dataForm.disposalSuggestions = disposalSuggestions[disposalSuggestions.length - 1].disposalSuggestion;
          }
          res.data.areaId && (this.dataForm.areaName = dynamicText(res.data.areaId, this.areaOptions));
          this.sourceOptions.length && this.dataForm.reportSource && (this.dataForm.reportSourceName = this.sourceOptions.find(v => v.Id == this.dataForm.reportSource).FullName);
          if(this.questionTypeOptions.findIndex(v => v.id == this.dataForm.questionType) == -1) {
            this.dataForm.otherQuestionType = res.data.questionType;
            this.dataForm.questionType = '0';
          }
          this.dataForm.selfMediaPlatformType = res.data.selfMediaPlatformType || '--';
          this.form_loading = false;
          console.log(this.dataForm, 'this.dataForm');
        } else {
          this.form_loading = false;
        }
      });
    },
    dataFormSubmit() {
      this.$refs["elForm"].validate(async (valid) => {
        if (valid) {
          console.log(this.dataForm, 'this.dataForm');
          let obj = {
            ...this.dataForm,
            questionType: this.dataForm.questionType == '0' ? this.dataForm.otherQuestionType : this.dataForm.questionType,
            selfMediaPlatformType: this.dataForm.selfMediaPlatformType == '0' ? this.dataForm.selfMediaPlatformTypeOther : this.dataForm.selfMediaPlatformType,
            disposalSuggestions: [
              {
                disposalSuggestion: this.dataForm.disposalSuggestions,
                fileUrl: '',
              }
            ],
          };
          this.isSHILevel && delete obj.disposalSuggestions;
          this.btnLoading = true;
          try {
            let res = !this.dataForm.id ? await addForm(obj) : await updataForm(obj);
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1000,
              onClose: () => {
                (this.visible = false), this.$emit("refresh", true);
              },
            });
          } catch (error) {
            this.btnLoading = false;
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.baseInspectionReportForm {
  :deep(.el-radio) {
    margin: 0 30px 8px 0;
  }
}
</style>
