<template>
  <div class="">
    <el-dialog :title="title" :visible.sync="visible" width="650px" append-to-body destroy-on-close :before-close="close" top="2vh">
      <div class="template-edit">
        <div>
          <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px" label-position="left">
            <el-form-item label="模板名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="使用权限" prop="permissions">
              <el-radio-group v-model="form.permissions">
                <el-radio-button v-for="item in $constants.permissions" :label="item.value">{{ item.label }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" placeholder="请输入内容" v-model="form.remark"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="form.permissions === 1">
          <el-form :inline="true">
            <el-form-item label="专题库">
              <el-input v-model="queryParams.projectName" size="small" placeholder="请输入专题库名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="" size="small" @click="getProjectList">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table ref="multipleTable" border :data="projectList" header-row-class-name="custom-table-header" v-loading="loading2">
            <el-table-column prop="" label="" width="55" align="center">
              <template slot-scope="scope">
                <el-radio v-model="form.projectId" :label="scope.row.id"><span></span></el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="专题库名称" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column prop="clientName" label="委托方" show-overflow-tooltip align="center"></el-table-column>
            <el-table-column label="企业应用场景" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-for="item in scope.row.scenarioName">{{ item }} <br> </span>
              </template>
            </el-table-column>
            <el-table-column label="调查类型" align="center" show-overflow-tooltip>
              <template slot-scope="scope">
                <span v-for="item in scope.row.typeName">{{ item }} <br> </span>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination :current-page.sync="queryParams.current" :page-size="queryParams.size" :total="total" @current-change="handleCurrentChange" layout="total, prev, pager, next, jumper" background></el-pagination>
          </div>
        </div>
        <el-upload
            class="upload-template"
            drag
            action=""
            :auto-upload="false"
            :show-file-list="false"
            :on-change="onFileChange"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text" v-if="!this.form.file">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__text" v-else><em>{{ this.form.file.name }}</em></div>
          <div class="el-upload__tip" slot="tip">只能上传doc/docx文件，且不超过20MB <!--<a href="/report/new/template/label" target="_blank">支持的标签</a>--></div>
        </el-upload>
        <el-table :data="form.label" border header-row-class-name="custom-table-header" v-if="form.id">
          <el-table-column label="标签" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.label" size="small" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="名称" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" size="small"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.remark" size="small"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">关 闭</el-button>
        <el-button type="primary" @click="submit()" :loading="loadingBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      loading2: false,
      loadingBtn: false,
      title: '',
      visible: false,
      activeNames: ['0', '1', '2', '3'],
      queryParams: {
        name: '',
        technicalTheme: '',
        clientName: '',
        size: 10,
        current: 1,
        sort: {
          order: 'desc',
          prop: 'create_time'
        },
        myself: false
      },
      projectList: [],
      total: 0,
      form: {},
      file: {},
      rules: {
        name: [
          { required: true, message: '请输入模板名称', trigger: 'blur' },
        ],
        permissions: [
          { required: true, message: '请输选择使用权限', trigger: 'change' },
        ],
      },
    }
  },
  async mounted() {

  },
  methods: {
    open(row, title) {
      this.form = { ...row }
      this.title = title
      this.visible = true
      this.getProjectList()
    },
    close() {
      this.visible = false
      this.$emit('close')
    },
    handleCurrentChange(val) {
      this.queryParams.current = val;
      this.getProjectList();
    },
    getProjectList() {
      this.loading2 = true
      this.$api.getProjectListV2(this.queryParams).then(response => {
        this.projectList = response.data.records
        this.total = response.data.total
        this.loading2 = false
      })
    },
    onFileChange(file, fileList) {
      const fileType = file.name.substr(file.name.lastIndexOf('.') + 1)
      if (fileType === 'docx' || fileType === 'doc') {
        this.$set(this.form, 'file', file.raw)
      } else {
        this.$message.error('文件格式错误')
      }
    },
    submit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // console.log('提交表单', this.form)
          if (this.form.permissions === 1 && !this.form.projectId) {
            this.$message.error('请选择专题库')
            return false
          }
          let params = new FormData()
          if (this.form.file) {
            params.append('file', this.form.file)
          }
          if (this.form.projectId) {
            params.append('projectId', this.form.projectId)
          }
          if (!this.form.file) {
            params.append('labelConfig', JSON.stringify(this.form.label))
          }
          params.append('name', this.form.name)
          params.append('permissions', this.form.permissions)
          params.append('remark', this.form.remark)
          if (this.form.id) {
            const labelName = this.form.label.map(item => item.name)
            if (!labelName.every(item => !!item)) {
              this.$message.error('标签不能为空')
              return false
            }
            if (this.$_.uniq(labelName).length !== labelName.length) {
              this.$message.error('标签名称重复')
              return false
            }
            this.loadingBtn = true
            params.append('id', this.form.id)
            this.$api.editNewTemplate(params).then(response => {
              this.$message.success('编辑成功')
              this.loadingBtn = false
              this.close()
            }).catch(error => {
              this.loadingBtn = false
            })
          } else {
            if (!this.form.file) {
              this.$message.error('请上传模板文件')
              return false
            }
            if (this.form.permissions === 1 && !this.form.projectId) {
              this.$message.error('请选择所属专题库')
              return false
            }
            this.loadingBtn = true
            this.$api.addNewTemplate(params).then(async (response) => {
              this.id = response.data
              this.$message.success('新增成功')
              this.loadingBtn = false
              this.close()
            }).catch(error => {
              this.loadingBtn = false
            })
          }
        } else {
          // console.log('error submit!!');
          this.$message.error('请将表单填写完整')
          return false;
        }
      });
    },
  }
}
</script>

<style lang="less">
.template-edit {
  .el-tabs__header {
    margin-top: 35px !important;
    margin-left: 20px;
  }
  .el-card__body {
    padding: 0 !important;
  }
  .el-header, .el-footer {
    padding: 15px !important;
  }
  .upload-template {
    .el-upload {
      width: 100%;
      .el-upload-dragger {
        width: 100%;
      }
    }
  }
  .el-collapse {
    border: 1px solid #EBEEF5 !important;
    .el-collapse-item__header {
      font-weight: bold !important;
      padding: 0 20px !important;
      border-bottom: 1px solid #EBEEF5 !important;
    }
    .el-collapse-item__content {
      padding: 20px !important;
    }
  }
  .none {
    .cell {
      display: none !important;
    }
  }
}
</style>
