<template>
  <section class="managementDetail">
    <ai-detail>
      <template #title>
        <ai-title title="公文登记" isShowBottomBorder isShowBack @onBackClick="cancel(true)"/>
      </template>
      <template #content>
        <ai-card title="公文信息">
          <template slot="content">
            <div class="form_div mar-t16">
              <el-form
                ref="rules"
                :model="form"
                :rules="formRules"
                size="small"
                label-suffix="："
                label-width="100px"
                >
                <el-form-item label="公文名称" prop="documentName">
                  <el-input
                    v-model="form.documentName"
                    placeholder="请输入..."
                    maxlength="50"
                  ></el-input>
                </el-form-item>
                <div class="above">
                  <div class="left">
                    <el-form-item label="公文编号" prop="documentCode">
                      <el-input
                        v-model="form.documentCode"
                        placeholder="请输入..."
                        maxlength="50"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div class="right">
                    <el-form-item label="公文类型" prop="documentType">
                      <el-select
                        v-model="form.documentType"
                        placeholder="请选择..."
                        clearable
                      >
                        <el-option
                          v-for="(item, i) in dict.getDict('officialDocumentName')"
                          :key="i"
                          :label="item.dictName"
                          :value="item.dictValue"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div class="above">
                  <div class="left">
                    <el-form-item label="保密等级">
                      <el-select
                        v-model="form.confidentialityLevel"
                        placeholder="请选择..."
                        clearable
                      >
                        <el-option
                          v-for="(item, i) in dict.getDict('officialDocumentConfidentialityLevel')"
                          :key="i"
                          :label="item.dictName"
                          :value="item.dictValue"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <div class="right">
                    <el-form-item label="阅示类型" prop="readType">
                      <el-select @change="readTypeChange"
                        v-model="form.readType"
                        placeholder="请选择..."
                        clearable
                      >
                        <el-option
                          v-for="(item, i) in dict.getDict('officialDocumentReadType')"
                          :key="i"
                          :label="item.dictName"
                          :value="item.dictValue"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div class="above">
                  <div class="left">
                    <el-form-item label="紧急程度">
                      <el-select
                        v-model="form.emergencyLevel"
                        placeholder="请选择..."
                        clearable
                      >
                        <el-option
                          v-for="(item, i) in dict.getDict('officialDocumentEmergencyLevel')"
                          :key="i"
                          :label="item.dictName"
                          :value="item.dictValue"
                        ></el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
                <div class="above">
                  <div class="left">
                    <el-form-item label="发文机关">
                      <el-input
                        v-model="form.issuingUnit"
                        placeholder="请输入..."
                        maxlength="50"
                      ></el-input>
                    </el-form-item>
                  </div>
                  <div class="right">
                    <el-form-item label="发文字号">
                      <el-input
                        v-model="form.issuingFont"
                        placeholder="请输入..."
                        maxlength="50"
                      ></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="above">
                  <div class="left">
                    <el-form-item label="签发人">
                      <el-input
                        v-model="form.signer"
                        placeholder="请输入..."
                        maxlength="50"
                      ></el-input>
                    </el-form-item>
                  </div>
                </div>
                <el-form-item label="备注">
                  <el-input
                    v-model="form.remark"
                    type="textarea"
                    :rows="5"
                    maxlength="200"
                    show-word-limit
                    placeholder="请输入..."
                  ></el-input>
                </el-form-item>
                <el-form-item label="附件">
                  <div class="upload">
                    <ai-uploader :instance="instance" v-model="form.files" fileType="file" :limit="9" @change="onChange"></ai-uploader>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </ai-card>
        <ai-card title="流转信息">
          <template #content>
            <span class="form-label">流转对象：</span>
            <div class="user-content">
              <ai-wechat-selecter slot="append" :instance="instance" v-model="form.flowUsers" isShowUser :isMultiple="isMultiple"></ai-wechat-selecter>
            </div>
          </template>
        </ai-card>
      </template>
      <template #footer>
        <el-button class="delete-btn footer-btn" @click="cancel(true)">取消</el-button>
        <el-button class="footer-btn" type="primary" @click="save('rules', '1')">保存并流转</el-button>
        <el-button class="footer-btn" @click="save('rules', '0')">保存</el-button>
      </template>
    </ai-detail>
  </section>
</template>

<script>
export default {
  name: "managementDetail",
  props: {
    instance: Function,
    dict: Object,
    permissions: Function,
    params: Object
  },
  data() {
    return {
      form: {
        documentName: '',
        documentCode: '',
        documentType: '',
        confidentialityLevel: '',
        readType: '',
        emergencyLevel: '',
        issuingTime: '',
        issuingUnit: '',
        issuingFont: '',
        signer: '',
        overDescription: '',
        overTime: '',
        deliver: '',
        remark: '',
        files: [],
        fileIds: [],
        flowUsers: [],
      },
      isMultiple: true,
    };
  },
  computed: {
    formRules(){
      return {
        documentName: [{required: true, message: "请输入公文名称", trigger: 'change' }],
        documentCode: [{required: true, message: "请输入公文编号", trigger: 'change' }],
        documentType: [{required: true, message: "请选择公文类型", trigger: 'change' }],
        readType: [{required: true, message: "请选择阅示类型", trigger: 'change' }],
      }
    },
    colConfigs(){
      return [
        {
          prop: 'meetingUserName',
          align: 'center',
          label: '姓名',
        },
        {
          prop: 'meetingUserPhone',
          align: 'center',
          label: '手机号码',
        },
        {
          prop: 'meetingUnitName',
          align: 'center',
          label: '所属部门',
        },
        {
          slot: 'joinStatus',
        },
        {
          slot: 'option',
        }
      ]
    },
  },
  created() {
    this.dict.load('issuingUnit','officialDocumentEmergencyLevel', 'officialDocumentReadType', 'officialDocumentConfidentialityLevel', 'officialDocumentName');
  },
  mounted() {
    if(this.params.id) {
      this.getDetail()
    }
  },
  methods: {
    onChange() {

    },
    readTypeChange() {
      if(this.form.readType == 0) {
        this.isMultiple = false
        if(this.form.flowUsers.length > 1) {
          this.form.flowUsers = []
        }
      }else {
        this.isMultiple = true
      }
    },
    getDetail() {
      this.instance.post(`/app/appofficialdocumentinfo/queryDetailById?id=${this.params.id}&flag=0`, null).then((res) => {
        if (res.code == 0) {
          this.form = {...res.data}
          this.form.files = this.form.files || []
        }
      });
    },
    save(formName, status){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submit(status)
        } else {
          return false;
        }
      });
    },
    submit(status) {
      var flowUsers = []
      this.form.flowUsers.map(item => {
        var info = {
          flowUserId: item.id,
          flowUserName: item.name,
          avatar: item.avatar
        }
        flowUsers.push(info)
      })

      this.form.fileIds = []
      if(this.form.files.length) {
        this.form.files.map((item) => {
          this.form.fileIds.push(item.id)
        })
      }
      this.instance.post(`/app/appofficialdocumentinfo/addOrUpdate`, {
        ...this.form,
        status: status,
        flowUsers: flowUsers
      }, null).then((res) => {
        if (res.code == 0) {
          if(this.params.id){
            this.$message.success("编辑成功");
          }else{
            this.$message.success("提交成功");
          }
          this.cancel(true)
        }
      });
    },
    cancel(isRefresh) {
      this.$emit('change', {
        type: 'list',
        isRefresh: !!isRefresh
      })
    },
    downFileAll () {
      if (this.form.files.length > 0) {
        this.instance.post('/app/appofficialdocumentinfo/downLoadAllFileForDetail', null, {
          responseType: 'blob',
          params: {
            id: this.form.id
          }
        }).then((res) => {
          const link = document.createElement('a')
          let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          var num = ''
          for (let i = 0; i < 10; i++) {
            num += Math.ceil(Math.random() * 10)
          }
          link.setAttribute('download', '公文文件' + '.zip')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        })
      } else {
        this.$message.error('暂无附件提供下载')
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.managementDetail {
  height: 100%;
  overflow: auto;
  background: #f3f6f9;
  .above{
    overflow: hidden;
    width: 100%;
    .left{
      width: 50%;
      float: left;
    }
    .right{
      width: 50%;
      float: right;
    }
    .el-select{
      width: 100%;
    }
    .el-date-editor.el-input{
      width: 100%;
    }
  }
  .iconEdit,.Edit{
    color:#5088FF;
    font-size: 12px;
    cursor: pointer;
    padding-left: 8px;
  }
  .form-label{
    display: inline-block;
    width: 100px;
    color: #666;
    font-size: 14px;
    text-align: right;
  }
  .user-content{
    display: inline-block;
    width: calc(100% - 100px);
  }
}
</style>