<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.value2.name }}
      </el-form-item>
      <el-form-item label="" v-if="data.value2.name1">
        <span style="color: #f56c6c;">{{data.value2.name1}}</span>
      </el-form-item>
      <el-form-item label="资质类型">
        {{ data.value2.type }}
      </el-form-item>
      <el-form-item label="" v-if="data.value2.type1">
        <span style="color: #f56c6c;">{{data.value2.type1}}</span>
      </el-form-item>
      <el-form-item label="资质等级" v-if="data.type!=='OTHER'">
        <span v-if="data.value2.grade===10">国家级</span>
        <span v-if="data.value2.grade===20">省级</span>
        <span v-if="data.value2.grade===30">市级</span>
      </el-form-item>
      <el-form-item label="" v-if="data.value2.grade1">
        <span v-if="data.value2.grade1===10">国家级</span>
        <span v-if="data.value2.grade1===20">省级</span>
        <span v-if="data.value2.grade1===30">市级</span>
      </el-form-item>
      <el-form-item label="二级等级" v-if="data.type==='OTHER'">
        {{ data.value2.level }}
      </el-form-item>
      <el-form-item label="" v-if="data.value2.level1">
        <span style="color: #f56c6c;">{{data.value2.level1}}</span>
      </el-form-item>
      <el-form-item label="资质范围">
        {{data.value2.scope}}
      </el-form-item>
      <el-form-item label="" v-if="data.value2.scope1">
        <span style="color: #f56c6c;">{{data.value2.scope1}}</span>
      </el-form-item>
      <el-form-item label="描述">
        {{data.value2.description}}
      </el-form-item>
      <el-form-item label="" v-if="data.value2.description1">
        <span style="color: #f56c6c;">{{data.value2.description1}}</span>
      </el-form-item>
      <el-form-item label="备案城市" v-if="data.type==='OTHER'">
        {{ data.value2.citys }}
      </el-form-item>
      <el-form-item label="所在省" v-if="data.type!=='OTHER'">
        {{ data.value2.province }}
      </el-form-item>
      <el-form-item label="所在市" v-if="data.type!=='OTHER'">
        {{ data.value2.city }}
      </el-form-item>
      <el-form-item label="报送人">
        {{ data.value2.name }}
      </el-form-item>
    </el-form>
    <div v-if="showData.type==='quali:update'">
      <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>
        </el-form-item>
        <el-form-item label="二级等级" v-if="formData.type==='OTHER'">
          {{ formData.level }}
        </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'">
          {{ formData.province_name }}{{ formData.city_name }}
        </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>
      <el-divider></el-divider>
      <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>
        </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('description')"> {{ formData2.description }}</span>
        </el-form-item>
        <el-form-item label="备案城市" v-if="formData2.type==='OTHER'">
          <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>
    </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();
      this.getProvince();
    },
    methods: {
      setClass(item){
        let obj = {};
        if(this.fieldList2.indexOf(item)>-1){
          obj =  'redFont';
        }
        return obj;
      },
      initRecord() {
        //操作类型查看/确认
        this.action = this.showData.action;
        this.data = Object.assign({}, this.showData.data);
        qactionItem(this.data.id).then(res=>{
          if (res.code>=200) {
            this.formData =Object.assign({}, res.data.value1);
            this.formData2 = res.data.value1;
            debugger;
            console.log(this.formData);
            console.log(this.formData2);
            let fieldList = [];
            let updateDetail = res.data.update_detail;//更改字段
            for( let key in this.formData2 ){
              fieldList.push(key);//所有字段
            }
            updateDetail.forEach(item=>{
              if(fieldList.indexOf(item.field)>-1){
                this.formData2[item.field] = item.value2;
              }
            });
          }
        })
      },
      confirm() {
        qactionConfirm(this.data.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>
