<template>
  <div>
    <el-form ref="form" :rules="rules"  :model="form" label-width="120px">
      <el-form-item
          label="标题："
      >
      {{ form.title }}
      </el-form-item>
      <el-form-item label="性质："  prop="nature">
            <el-select v-model="form.nature" clearable  placeholder="请选择" @change="ChangeNature">
              <el-option
                v-for="item in NatureList"
                :key="item.id"
                :label="item.type_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="进度：" prop="nature_level">
            <el-select v-model="form.nature_level" clearable  placeholder="请选择">
              <el-option
                v-for="item in NatureLevelList"
                :key="item.id"
                :label="item.type_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型：" prop="type">
            <el-select v-model="form.type" clearable  placeholder="请选择" @change="ChangeType">
              <el-option
                v-for="item in LetterTypeList"
                :key="item.id"
                :label="item.type_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="类型说明：" prop="type_level">
            <el-select v-model="form.type_level" clearable  placeholder="请选择">
              <el-option
                v-for="item in LetterTypeLeveList"
                :key="item.id"
                :label="item.type_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
      <el-form-item
          label="详细说明："
      >
      {{ form.describe }}
      </el-form-item>
      <el-form-item
          label="判决书："
      >
        <el-button v-if="form.judgment!=null" type="primary"   size="mini" round @click="download(form.judgment,'判决书')">下载</el-button>
      </el-form-item>
      <el-form-item
          label="录音录像："
      >
        <el-button v-if="form.audio_and_video!=null" type="primary"   size="mini" round @click="download(form.audio_and_video,'录音录像')">下载</el-button>
      </el-form-item>
      <el-form-item
          label="合同："
      >
         <el-button v-if="form.contract!=null" type="primary"   size="mini" round @click="download(form.contract,'合同')">下载</el-button>
      </el-form-item>
      <el-form-item
          label="资质："
      >
       <el-button v-if="form.qualifications!=null" type="primary"   size="mini" round @click="download(form.qualifications,'资质')">下载</el-button>
      </el-form-item>
      <el-form-item
          label="涉案标的额："
      >
      {{ form.money }}
      </el-form-item>
      <el-form-item
          label="姓名："
      >
      {{ form.name }}
      </el-form-item>
      <el-form-item
          label="身份证号："
      >
      {{ form.id_card }}
      </el-form-item>
      <el-form-item
          label="你最想："
      >
      {{ form.like_remark }}
      </el-form-item>
     
      <!---1通过，2待审核，3待发 4,拒绝 5删除-->
      <el-form-item
          label="状态："
          prop="status"
      >
      <el-radio-group v-model="form.status">
          <el-radio
           v-for="item in this.StatusList"   
           :key = "item.id"
           :label="item.id">{{ item.type_name }}</el-radio>
      </el-radio-group>
      </el-form-item>
      <el-form-item
          label="备注信息："
      >
        <el-input v-model="form.reason"  maxlength="50" placeholder="备注信息"></el-input>
      </el-form-item>
      <el-form-item>
        <div style="text-align: center">
          <el-button type="primary" @click="onSubmit" :disabled="Isdisabled" :loading="isloading">保存</el-button>
          <el-button style="color: #5075FC " @click="closeDlg">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { forEach } from "lodash";
import Editor from "../../../components/editor/Editor";
export default {
  components: {
        Editor
    },
  props: {
    ArticleDataForm: {
      type: Object,
      default: () => {}
    },
    isloading:{
      type:Boolean,
      default: true
    },
    closeDlg:{
      type:Function
    }
  },
  data() {
    return {
      NatureLevelList:[],//；性质进度
      LetterTypeList:[],//类型列表
      LetterTypeLeveList:[],//类型说明列表
      NatureList:[], //性质列表
      StatusList:[], //状态列表
      form: {
 
      },
 
      Isdisabled: false,
      rules: {
        status: [
          { required: true, message: '请选择状态' },
        ],
        nature: [
          { required: true, message: '请选择性质' },
        ],
        nature_level: [
          { required: true, message: '请选择进度' },
        ],
        type_level: [
          { required: true, message: '请选择类型说明' },
        ],
        type: [
          { required: true, message: '请选择类型' },
        ]
      },
      tagInput: '',
      tags: [],
      value:''
    }
  },
  mounted() {
    if(this.ArticleDataForm) {
      this.form = Object.assign({} , this.ArticleDataForm)
    }

    this.getStatusList();
    this.getNatureList();
    this.getTypeList();
  },
  methods: {
    ChangeNature(){
      let _t = this;
      
      _t.NatureList.forEach(item => {
          if(item.id==_t.form.nature){
            if(item.children){
              _t.NatureLevelList = item.children
            }else{
              _t.NatureLevelList = []
             
            }
             _t.form.nature_level =''
           
          }
        });
        console.log( _t.form.nature_level)
        console.log(_t.NatureLevelList)
      },
      ChangeType(){
      let _t = this;
      
      _t.LetterTypeList.forEach(item => {
          if(item.id==_t.form.type){
            if(item.children){
              _t.LetterTypeLeveList = item.children
            }else{
              _t.LetterTypeLeveList = []
             
            }
             _t.form.type_level =''
           
          }
        });

      },
    getNatureList:function(){
        let _t = this;
        let parames = {
            'type':1,
        }
        console.log("参数：",parames)
        this.$api.publicApi.getLetterType(parames).then(res=>{
              
                if(res.code==200){
                  if(res.data.length==0){
                    this.$message.error("还没有数据")
                    return
                  }
                    _t.NatureList = res.data;
                    _t.NatureList.forEach(item => {
                  if(item.id==_t.form.nature){
                     _t.NatureLevelList = item.children
                    }
                  });
                  console.log(_t.NatureList);
                 
                }else{
                    this.$message.error(res.message)
                }
            })
      },
      getTypeList:function(){
        let _t = this;
        let parames = {
            'type':2,
        }
        console.log("参数：",parames)
        this.$api.publicApi.getLetterType(parames).then(res=>{
                if(res.code==200){
                  if(res.data.length==0){
                    this.$message.error("还没有数据")
                    return
                  }
                  _t.LetterTypeList = res.data;
                  console.log("fuck",_t.form.type,_t.LetterTypeList)

                  _t.LetterTypeList.forEach(item => {
                      console.log("测试：",item.id,_t.form.type)
                    if(item.id == _t.form.type){
                      _t.LetterTypeLeveList = item.children
                      }
                  });
                    console.log("打印数据：",_t.LetterTypeLeveList,_t.form.type_level)
                }else{
                    this.$message.error(res.message)
                }
            })
      },
    handelIncrease(step) {
          console.log("step====:",step)
          this.form.content = step
    },
    closeDlg() {
      console.log("edit提交")
      this.$emit('closeDlg',1)
    },
    onSubmit() {
      let that = this
      
      that.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.tag = that.tags
          this.$emit('ArticleSubmitClick', this.form)
        }
      })
    },
    getStatusList:function(){
        let _t = this;
        let parames = {
            'type':10,
        }
        console.log("参数：",parames)
        this.$api.publicApi.getLetterType(parames).then(res=>{
                if(res.code==200){
                  if(res.data.length==0){
                    this.$message.error("还没有数据")
                    return
                  }
                  _t.StatusList = res.data;
                }else{
                    this.$message.error(res.message)
                }
            })
      },
      download(file,fileName=''){
        console.log("点击下载：",file)
        let fileS = []
        if(file.length>0){
            file.forEach((item) => {
              console.log( JSON.parse(item).fileSrc)
              fileS.push(JSON.parse(item).fileSrc)
          });
        }
        console.log(fileS)
        // return false
        let _t = this;
        let parames = {
            'files':fileS,
            'fileName':fileName
        }

        this.$api.publicApi.downloadFile(parames).then(res=>{
                if(res.code==200){
                  this.$message.success('下载中......')
                  window.location.href = res.data.fileUrl
                }else{
                    this.$message.error('下载失败')
                }
            })
      }

  }
}
</script>
<style>
.el-cascader-node>.el-radio{
  margin-top:25px;
}
</style>

<style lang="less" scoped>

.uploadImg {
  width: 110px;
  height: 100px;
  border: 1px solid #F8F8F8;
  border-radius: 4px;
  cursor:pointer;
  position: absolute;
  top: 0;
}
.inputIcon {
  width: 110px;
  height: 100px;
  position: relative;
  opacity: 0;
}
.uploadImg_warp {
  width: 100%;
  height: 100%;
  display:flex ;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.uploadImg_img {
  height: 32px;
}
.footerBotton {
  text-align: center;
}
.avatar-uploader {
  width: 110px;
  height: 110px;
  border: 1px solid #F8F8F8;
  border-radius: 4px;
  position: relative;
}
.el-icon-plus {
  width: 110px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.el-icon-plus-icon {
  display: block;
  margin-bottom: 15px;
}
.el-icon-plus-up {
  color: #222222;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
}
/deep/ .el-radio {
  line-height: 40px;
}
</style>


