<template>
  <div id="tDeclarationApprovalForm">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="top">
          <span class="shu"></span><span class="title">{{ formTitle }}</span>
        </el-col>
        <el-col :span="24" class="form">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-col :span="12">
              <el-form-item label="企业名称:">
                <span>{{ ruleForm.company_name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="政策名称:">
                <span>{{ ruleForm.policy_declaration_title }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人:">
                <span>{{ ruleForm.contact }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话:">
                <span>{{ ruleForm.phone }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请时间:">
                <span>{{ getDate(ruleForm.create_time) }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="补充说明:">
                <span>{{ ruleForm.additional_explanation }}</span>
              </el-form-item>
            </el-col>

            <el-col :span="24" v-for="(item, index) in ruleForm.declaration_matters" :key="index">
              <el-col :span="12">
                <el-form-item label="申报事项:">
                  <span>{{ item.declaration}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="附件:">
                  <span><el-link :href="item.url" :download="item.name">{{item.name }}</el-link></span>
                </el-form-item>
              </el-col>
            </el-col>

          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import uploadImage from '@/layout/custom/uploadImage.vue';
  /*import uploadFile from '@/layout/custom/uploadFile.vue';*/
  import WangEditor from '@/components/wang-editor.vue';
  import { mapState, createNamespacedHelpers, mapGetters } from 'vuex';
  const { mapActions: tDeclarationApproval } = createNamespacedHelpers('tDeclarationApproval');
  import _ from 'lodash';

  export default {
    name: 'tDeclarationApprovalForm',
    props: {
      ruleForm: null,
    },
    components: {
      uploadImage,
      /*uploadFile,*/
      WangEditor,
    },
    data: () => ({
      formTitle: '企业申报审批管理',
      /*rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        type: [{ required: true }],
        link: [{ required: false }],
        issuing_organ: [{ required: true, message: '请输入发文机关', trigger: 'blur' }],
        subject_classification: [{ required: true }],
        subject_headings: [{ required: true }],
        description: [{ required: true, message: '请输入内容', trigger: 'blur' }],
      },*/
    }),
    created() {
    },
    mounted(){
    },
    computed: {},
    methods: {
      ...tDeclarationApproval([ 'fetch']),
      submitForm() {
        this.$emit('submitForm', { data: this.ruleForm });
      },
      resetForm() {
        this.$emit('resetForm');
      },
      uploadSuccess({ data }) {
        this.$set(this.ruleForm, 'image', data.uri);
      },
      remove(file) {
        this.$set(this.ruleForm, 'image', '')
      },
      uploadFileSuccess({ data,file }) {
        if(_.isArray(this.ruleForm.enclosure)){
          this.$set(this.ruleForm.enclosure, this.ruleForm.enclosure.length,{name:file.name,url:data.uri});
        }else {
          this.$set(this.ruleForm, 'enclosure',[{name:file.name,url:data.uri}]);
        }
      },
      removeFile(file) {
        if(_.isArray(this.ruleForm.enclosure)){
          let temp = this.ruleForm.enclosure.filter((val) => {
            return val.url !== file.url;
          });
          this.$set(this.ruleForm, 'enclosure',temp);
        }else {
          this.$set(this.ruleForm, 'enclosure',[]);
        }
      },
      changeType(value){
        if(value && value === '2'){
          this.$set(this.rules, 'link',[{ required: true }]);
        }else{
          this.$set(this.rules, 'link',[{ required: false }]);
        }
      },
      async checkType(value){
        let res = await this.fetch(value);
        if(res.data.type === '2'){
          this.$set(this.rules, 'link',[{ required: true }]);
        }
      },
      getDate(val) {
        if(val){
          return this.format(new Date(Number(val)),'yyyy年MM月dd');
        }
        return '';
      },
      format(date,formatStr){
        formatStr=formatStr.replace(/yyyy|YYYY/,date.getFullYear());
        formatStr=formatStr.replace(/MM/,(date.getMonth()+1)>9?(date.getMonth()+1).toString():'0' + (date.getMonth()+1));
        formatStr=formatStr.replace(/dd|DD/,date.getDate()>9?date.getDate().toString():'0' + date.getDate());
        return formatStr;
      },
    },
  };
</script>

<style lang="less" scoped>
  .form {
    padding: 0 200px 0 0;
  }

  p {
    padding: 0;
    margin: 0;
  }

  .top .shu {
    float: left;
    width: 4px;
    height: 20px;
    background: rgba(233, 2, 29, 1);
  }

  .top .title {
    float: left;
    padding: 0 10px;
    font-size: 16px;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: rgba(40, 40, 40, 1);
  }

  /deep/ .el-textarea__inner {
    min-height: 100px !important;
  }

  /deep/ .select {
    width: 632px;
  }

  .selects {
    width: 473px;
    margin: 0 15px 0 0;
  }

  /deep/ .el-radio__input.is-checked + .el-radio__label {
    color: #e9021d;
  }

  /deep/ .el-radio__input.is-checked .el-radio__inner {
    border-color: #e9021d;
    background: #e9021d;
  }

  /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
    color: #e9021d;
  }

  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #e9021d;
    border-color: #e9021d;
  }

  /deep/ .el-checkbox-button,
  .el-checkbox-button__inner {
    margin: 0 15px 0 0;
  }

  /deep/ .el-checkbox-button__inner {
    padding: 7px 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button__inner:hover {
    color: #e9021d;
  }

  /deep/ .el-checkbox-button:first-child .el-checkbox-button__inner {
    border-left: 1px solid #ccc;
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button:last-child .el-checkbox-button__inner {
    border-radius: 5px;
  }

  /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
    color: #e9021d;
    background-color: #ffffff;
    border-color: #e9021d;
  }

  /deep/ .el-checkbox-button.is-checked .el-checkbox-button__inner {
    box-shadow: none;
  }

  /deep/ .el-switch.is-checked .el-switch__core {
    border-color: #e9021d;
    background-color: #e9021d;
  }
  /deep/ .el-form-item .el-form-item__label {
    font-size: 16px;
  }
  /deep/ .el-form-item .el-form-item__content {
    font-size: 16px;
  }

  .clickBtn .el-button {
    width: 100px;
    height: 40px;
    padding: 0;
    color: #ffffff;
    background: #b9b9b9;
    border-radius: 4px;
    margin: 40px;
  }

  .clickBtn {
    text-align: center;
    margin: 40px 0;
    border-top: 1px solid #ccc;
  }

  .clickBtn .el-button:first-child {
    background-color: #e9021d;
  }
</style>
