<template>
  <div class="app-container">
    <p  v-if="showData.type==='quali:create'" style="font-size: 20px;font-weight: bold;">新增资质</p>
    <p  v-if="showData.type==='quali:update'" style="font-size: 20px;font-weight: bold;">编辑资质</p>
    <el-form
      v-if="showData.type==='quali:create'"
      label-width="100px"
      label-position="left"
    >
      <el-form-item label="资质名称">
        {{ data.name }}
      </el-form-item>
      <el-form-item label="资质认定">
        {{ data.type }}
      </el-form-item>
      <el-form-item label="资质类型" v-if="data.type!=='OTHER'">
        <span v-if="data.grade===10">国家级</span>
        <span v-if="data.grade===20">省级</span>
        <span v-if="data.grade===30">市级</span>
        <span v-if="data.grade===40">实验室</span>
        <span v-if="data.grade===50">检验机构</span>
      </el-form-item>
      <el-form-item label="资质类型" v-if="data.type==='OTHER'">
        {{ data.level }}
      </el-form-item>
      <el-form-item label="有效期">
        {{data.end_date}}
      </el-form-item>
      <el-form-item label="资质范围">
        {{data.scope}}
      </el-form-item>
      <el-form-item label="描述">
        {{data.description}}
      </el-form-item>
      <el-form-item label="备案城市" v-if="data.type==='OTHER'">
        <span v-for="item in data.citys_" :key="item.id">{{item.name}}</span>
        <!--{{ data.value2.citys }}-->
      </el-form-item>
      <el-form-item label="所在省" v-if="data.grade===20">
        {{ data.province_name }}
      </el-form-item>
      <el-form-item label="所在市" v-if="data.grade==30">
        {{ data.city_name }}
      </el-form-item>
      <el-form-item label="上传文件" v-if="data.file_">
        {{data.file_.name}}
      </el-form-item>
      <el-link v-if="data.file_" :href="data.file_.file" target="_blank" type="primary">{{data.file_.name}}</el-link>
    </el-form>
    <div v-if="showData.type==='quali:update'">
      <p style="font-size: 20px;    margin: 8px 0;">原始数据：</p>
      <el-form
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="资质名称">
          {{ formData.name }}
        </el-form-item>
        <el-form-item label="资质认定">
          {{ formData.type }}
        </el-form-item>
        <el-form-item label="资质类型" v-if="formData.type!=='OTHER'">
          <span v-if="formData.grade===10">国家级</span>
          <span v-if="formData.grade===20">省级</span>
          <span v-if="formData.grade===30">市级</span>
          <span v-if="formData.grade===40">实验室</span>
          <span v-if="formData.grade===50">检验机构</span>
        </el-form-item>
        <el-form-item label="资质类型" v-if="formData.type==='OTHER'">
          {{ formData.level }}
        </el-form-item>
        <el-form-item label="有效期">
          {{ formData.end_date}}
        </el-form-item>
        <el-form-item label="资质范围">
          {{formData.scope}}
        </el-form-item>
        <el-form-item label="描述">
          {{formData.description}}
        </el-form-item>
        <el-form-item label="备案城市" v-if="formData.type==='OTHER'">
          <span v-for="item in formData.citys_" :key="item.id">{{item.name}}</span>
        </el-form-item>
        <el-form-item label="所在省" v-if="formData.grade===20">
          {{ formData.province_name }}
        </el-form-item>
        <el-form-item label="所在市" v-if="formData.grade===30">
          {{ formData.city_name }}
        </el-form-item>
        <el-form-item label="上传文件" v-if="formData.file_">
          {{formData.file_.name}}
        </el-form-item>
        <el-link v-if="formData.file_" :href="formData.file_.file" target="_blank" type="primary">{{formData.file_.name}}</el-link>
      </el-form>
      <el-divider></el-divider>
      <p style="font-size: 20px;    margin: 8px 0;"> 更改后数据：</p>
      <el-form
        label-width="100px"
        label-position="left"
      >
        <el-form-item label="资质名称">
          <span :class="setClass('name')"> {{ formData2.name }}</span>
        </el-form-item>
        <el-form-item label="资质认定">
          <span :class="setClass('type')"> {{ formData2.type }}</span>
        </el-form-item>
        <el-form-item label="资质类型" v-if="formData2.type!=='OTHER'">
          <span v-if="formData2.grade===10" :class="setClass('grade')">国家级</span>
          <span v-if="formData2.grade===20" :class="setClass('grade')">省级</span>
          <span v-if="formData2.grade===30" :class="setClass('grade')">市级</span>
          <span v-if="formData2.grade===40" :class="setClass('grade')">实验室</span>
          <span v-if="formData2.grade===50" :class="setClass('grade')">检验机构</span>
        </el-form-item>
        <el-form-item label="资质类型" v-if="formData2.type==='OTHER'">
          <span :class="setClass('level')"> {{ formData2.level }}</span>
        </el-form-item>
        <el-form-item label="资质范围">
          <span :class="setClass('scope')"> {{ formData2.scope }}</span>
        </el-form-item>
        <el-form-item label="有效期">
          <span :class="setClass('end_date')"> {{ formData2.end_date}}</span>
        </el-form-item>
        <el-form-item label="描述">
          <span :class="setClass('description')"> {{ formData2.description }}</span>
        </el-form-item>
        <el-form-item label="备案城市" v-if="formData2.type==='OTHER'">
          <span :class="setClass('citys')" v-for="item in formData2.citys_" :key="item.id">{{item.name}}</span>
          <!--<span :class="setClass('citys')">  {{ formData2.province_name}}{{ formData2.city_name }}</span>-->
        </el-form-item>
        <el-form-item label="所在省" v-if="formData2.grade===20">
          <span :class="setClass('provice')"> {{ formData2.province_name}}</span>
        </el-form-item>
        <el-form-item label="所在市" v-if="formData.grade===30">
          <span :class="setClass('city')"> {{ formData2.city_name }}</span>
        </el-form-item>
        <el-form-item label="上传文件" v-if="formData2.file_">
          {{formData2.file_.name}}
        </el-form-item>
        <el-link v-if="formData2.file_" :href="formData2.file_.file" target="_blank" type="primary">{{formData2.file_.name}}</el-link>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div style="text-align: right">
      <el-button
        v-if="action === 'confirm'"
        @click="confirm()"
        type="primary"
      >
        确认
      </el-button>
    </div>
  </div>
</template>

<script>
  import {upUrl, upHeaders} from "@/api/file";
  import {qactionConfirm,qactionItem,getQualityItem,provinceLists,cityLists} from "@/api/ability";

  export default {
    name: "quliShow",
    props:{
      showData:{
        type:Object,
        require:true	//属性必要性：true表示属性必须进行传递
      },
      fieldList2:{
        type:Array,
        default:[]
      }
    },
    data() {
      return {
        data: null,
        action: null,
        fileList: [],
        formData: null,
        formData2: null,
        updateDetail: [],
        fieldList: [],
      };
    },
    mounted() {
      this.initRecord();
    },
    methods: {
      setClass(item){
        let obj = {};
        if(this.fieldList2.indexOf(item)>-1){
          obj =  'redFont';
        }
        return obj;
      },
      initRecord() {
        // debugger;
        //操作类型查看/确认
        let that = this;
        that.action = that.showData.action;
        let type = that.showData.type;
        qactionItem(that.showData.id).then(res=>{
          if (res.code>=200) {
            if(type==='quali:create'){
              that.data = res.data.value2;
            }else{
              that.formData =Object.assign({}, res.data.value1);
              that.formData2 = res.data.value1;
              let fieldList = [];
              let updateDetail = res.data.update_detail;//更改字段
              for( let key in that.formData2 ){
                fieldList.push(key);//所有字段
              }
              updateDetail.forEach(item=>{
                if(fieldList.indexOf(item.field)>-1){
                  that.formData2[item.field] = item.value2;
                }
              });
            }
          }
        })
      },
      confirm() {
        qactionConfirm(this.showData.id).then(res => {
          if (res.code>=200) {
            this.$emit("handleDo", false);
          }
        })
      },
    },
  };
</script>

<style scoped>
  .ma {
    margin-bottom: 10px;
    font-size: 20px;
  }

  .el-form-item {
    margin-bottom: 0px;
  }

  .litem {
    margin-left: 2px;
    cursor: pointer;
    color: #409eff;
  }
  .redFont{
    color: red;
  }
</style>
