<template>
  <el-dialog
    :title="openTitle"
    :visible.sync="visible"
    @close="handleClose"
    @open="open"
    v-dialogDrag
    custom-class="common-dialog dig-copy-tpl"
    :close-on-click-modal="false"
    append-to-body
    top="0"
  >
    <div class="container">
      <el-form label-width="0px" size="mini" label-position="left">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="模板名称" required label-width="80px"><el-input v-model="templateName" @blur="tmpBlur" placeholder="请输入" /></el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模块名称" required label-width="80px">
              <common-select v-model="moduleId" @selectChange="moduleChange" dict-type="CRM_Module_Code"></common-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="数据表名" required label-width="80px"><el-input v-model="tableName" @blur="tableBlur" placeholder="请输入" /></el-form-item>
          </el-col>
          <el-col :span="6" v-if="showAdd"><el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="addLine">添加行</el-button></el-col>
        </el-row>
      </el-form>
      <div class="table-wrap">
          <el-table :data="tableData" ref="tableRef" size="mini" border height="100%">
            <el-table-column type="index" label="序号" width="50" show-overflow-tooltip></el-table-column>
            <el-table-column prop="templateName" label="模板名称" min-width="200" :render-header="renderHeader"></el-table-column>

            <el-table-column prop="templateType" label="模板分类" min-width="150" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-input v-model="scope.row.templateType" placeholder="请输入" size="mini" />
              </template>
            </el-table-column>

            <el-table-column prop="moduleName" label="模块名称" min-width="150" :render-header="renderHeader"></el-table-column>

            <el-table-column prop="tableName" label="数据库表名" min-width="200" :render-header="renderHeader"></el-table-column>

            <el-table-column prop="fieldId" label="数据库字段名" min-width="200" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fieldId" placeholder="请输入数据库存储字段名称" size="mini" />
              </template>
            </el-table-column>

            <el-table-column prop="fieldName" label="字段名称" min-width="200" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fieldName" placeholder="请输入前端页面显示名称" size="mini" />
              </template>
            </el-table-column>

            <el-table-column prop="fieldAttr" label="字段属性" min-width="200" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fieldAttr" placeholder="请输入" size="mini" />
              </template>
            </el-table-column>

            <el-table-column prop="isRequired" label="是否必填" min-width="100" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-select v-model="scope.row.isRequired" placeholder="请选择" clearable size="mini">
                  <el-option v-for="item in dataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column prop="sortBy" label="排序" min-width="100" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sortBy" v-inputFilter:int placeholder="请输入" size="mini" />
              </template>
            </el-table-column>

            <el-table-column prop="span" label="占据列数" min-width="100" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-input v-model="scope.row.span" v-inputFilter:int placeholder="请输入(1~24列)" size="mini" />
              </template>
            </el-table-column>

            <el-table-column prop="isReadOnly" label="是否只读" min-width="100" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-select v-model="scope.row.isReadOnly" placeholder="请选择" clearable size="mini">
                  <el-option v-for="item in dataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column prop="operationType" label="操作类型" min-width="150" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-select v-model="scope.row.operationType" multiple placeholder="请选择" size="mini">
                  <el-option v-for="item in operTypeList" :key="item.key" :label="item.key" :value="item.vaule"></el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column prop="isShow" label="是否显示" min-width="100" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-select v-model="scope.row.isShow" placeholder="请选择" clearable size="mini">
                  <el-option v-for="item in dataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column prop="isUserOper" label="是否用户操作" min-width="120" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-select v-model="scope.row.isUserOper" placeholder="请选择" clearable size="mini">
                  <el-option v-for="item in dataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column prop="fieldLength" label="最大长度" min-width="120">
              <template slot-scope="scope">
                <el-input v-model="scope.row.fieldLength" v-inputFilter:int placeholder="请输入" size="mini" />
              </template>
            </el-table-column>

            <el-table-column label="正则校验" min-width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.regular" placeholder="请输入" />
              </template>
            </el-table-column>

            <el-table-column label="是否多选" min-width="80">
              <template slot-scope="scope">
                <el-select v-model="scope.row.multiple" placeholder="请选择" clearable>
                  <el-option v-for="item in dataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </template>
            </el-table-column>

            <el-table-column prop="fieldType" label="字段类型" min-width="120" :render-header="renderHeader">
              <template slot-scope="scope">
                <common-select v-model="scope.row.fieldType" dict-type="Crm_Field_Type" size="mini"></common-select>
              </template>
            </el-table-column>

            <el-table-column prop="sourceValue" label="来源值" min-width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sourceValue" placeholder="根据字段来源带出或手动输入" size="mini" />
              </template>
            </el-table-column>

            <el-table-column prop="fieldSource" label="字段来源" min-width="200" :render-header="renderHeader">
              <template slot-scope="scope">
                <common-select v-model="scope.row.fieldSource" dict-type="Crm_Field_Source" size="mini"></common-select>
              </template>
            </el-table-column>

            <el-table-column prop="sourceLabel" label="来源标签" min-width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sourceLabel" placeholder="根据字段来源带出或手动输入" size="mini" />
              </template>
            </el-table-column>

            <el-table-column prop="parentField" label="依赖查询参数" min-width="200" :render-header="renderHeader">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.parentField"
                  type="textarea"
                  :autosize="{ minRows: 1, maxRows: 2 }"
                  placeholder="请输入(多个参数用英文逗号分隔)"
                  size="mini"
                ></el-input>
              </template>
            </el-table-column>

            <el-table-column prop="sourceParams" label="来源参数" min-width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sourceParams" placeholder="请输入数字字典标识或接口url" type="textarea" :autosize="{ minRows: 1, maxRows: 2 }" size="mini" />
              </template>
            </el-table-column>

            <el-table-column label="操作" min-width="120" fixed="right">
              <template slot-scope="scope">
                <el-button v-if="scope.$index > 0" @click="deleteRow(scope.$index)" type="text" size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>
    </div>
    <div style="text-align: center;">
      <el-button @click="submitForm" type="warning">保存</el-button>
      <el-button @click="cleanFather" type="info" plain>取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'dig-copy',
  mounted() {},
  data() {
    return {
      openTitle: '',
      showAdd: false,
      visible: false,
      tableData: [],
      templateName: '',
      tableName: '',
      moduleId: '',
      dataForm:{
        moduleId: '',
        moduleName: '',
        templateName: '',
        fieldId: '', //页面显示名称为，数据库字段名, 对应的是数据存的字段
        fieldName: '', //页面模块字段显示的 label 标签名称
        tableName: '',
        parentField: '', //下拉框数据的依赖查询参数(数字字典，接口等)
        sortBy: 0,
        span: 6,
        fieldType: '',
        fieldAttr: '',
        fieldSource: '',
        fieldLength: '',
        sourceParams: '', //下拉框数据的字典标识或接口url
        sourceValue: '', // 存 下拉框 value 值对应的 java 对象 属性字段
        sourceLabel: '', // 存 下拉框 key 值对应的 java 对象 属性字段
        isRequired: 'Y',
        isShow: 'Y',
        status: 'Y',
        templateType: '',
        operationType: [],
        isReadOnly: '',
        isUserOper: '',
        regular: '',
        multiple: ''
      },
      // rules: {
      //   moduleId: [{ required: true, message: '请选择', trigger: 'change' }],
      //   templateName: [{ required: true, message: '请输入', trigger: 'blur' }],
      //   fieldId: [{ required: true, message: '请输入', trigger: 'blur' }],
      //   fieldName: [{ required: true, message: '请输入', trigger: 'blur' }],
      //   fieldAttr: [{ required: true, message: '请输入', trigger: 'blur' }],
      //   tableName: [{ required: true, message: '请输入', trigger: 'blur' }],
      //   parentField: [{ required: true, message: '请输入', trigger: 'blur' }],
      //   sortBy: [{ required: true, message: '请输入', trigger: 'blur' }],
      //   span: [{ required: true, message: '请输入', trigger: 'blur' }],
      //   fieldType: [{ required: true, message: '请选择', trigger: 'change' }],
      //   fieldSource: [{ required: true, message: '请选择', trigger: 'change' }],
      //   isRequired: [{ required: true, message: '请选择', trigger: 'change' }],
      //   isShow: [{ required: true, message: '请选择', trigger: 'change' }],
      //   templateType: [{ required: true, message: '请选择', trigger: 'change' }],
      //   operationType: [{ required: true, message: '请选择', trigger: 'change' }],
      //   isReadOnly: [{ required: true, message: '请选择', trigger: 'change' }],
      //   isUserOper: [{ required: true, message: '请选择', trigger: 'change' }]
      // },
      dataList: [
        {
          label: '是',
          value: 'Y'
        },
        {
          label: '否',
          value: 'N'
        }
      ]
    };
  },
  methods: {
    renderHeader(cerateElement, { column }) {
      return cerateElement('div', [
        cerateElement('span', column.label),
        cerateElement('span', {
          domProps: {
            innerHTML: '*'
          },
          style: {
            color: 'red',
            fontSize: '16px',
            marginLeft: '5px'
          }
        })
      ]);
    },
    addLine() {
      let line = {
        moduleId: '',
        moduleName: '',
        templateName: '',
        fieldId: '', //页面显示名称为，数据库字段名, 对应的是数据存的字段
        fieldName: '', //页面模块字段显示的 label 标签名称
        tableName: '',
        parentField: '', //下拉框数据的依赖查询参数(数字字典，接口等)
        sortBy: 0,
        span: 6,
        fieldType: '',
        fieldAttr: '',
        fieldSource: '',
        fieldLength: '',
        sourceParams: '', //下拉框数据的字典标识或接口url
        sourceValue: '', // 存 下拉框 value 值对应的 java 对象 属性字段
        sourceLabel: '', // 存 下拉框 key 值对应的 java 对象 属性字段
        isRequired: 'Y',
        isShow: 'Y',
        status: 'Y',
        templateType: '',
        operationType: [],
        isReadOnly: '',
        isUserOper: '',
        regular: '',
        multiple: ''
      };
      this.tableData.push(JSON.parse(JSON.stringify(line)));
    },
    cleanFather() {
      this.$parent.cleanSelect();
      this.visible = false;
      this.showAdd = false;
    },
    tmpBlur() {
      this.tableData.forEach(item => {
        item.templateName = this.templateName;
      });
    },
    tableBlur() {
      this.tableData.forEach(item => {
        item.tableName = this.tableName;
      });
    },
    moduleChange(obj) {
      this.tableData.forEach(item => {
        item.moduleName = obj.key;
        item.moduleId = obj.vaule;
      });
    },
    deleteRow(i) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.tableData.splice(i, 1);
          this.$message('已从列表中移除');
        })
        .catch(() => {});
    },

    checkData() {
      let flag = true;
      if (!this.templateName) {
        this.$message('请输入模板名称');
        flag = false;
      }
      if (!this.moduleId) {
        this.$message('请选择模块');
        flag = false;
      }
      if (!this.tableName) {
        this.$message('请输入数据表名');
        flag = false;
      }
      return flag;
    },

    submitForm() {
      if (!this.checkData()) {
        return;
      }
        let arr = JSON.parse(JSON.stringify(this.tableData));
        arr.forEach(item => {
          item.operationType = item.operationType.join(',');
        });
        let param = {
          templatesList: arr,
          templateName: this.templateName
        };
        this.$ajax.post({
          domain: 'crmCmUrl',
          url: 'templates.templatesCopeList',
          data: param,
          requestType: 'body',
          showLoad: true,
          success: function(res) {
            if (res.errorCode === 200) {
              this.$message.success('保存成功');
              this.$parent.doQuery();
              this.visible = false;
            }
          }.bind(this),
          error: function(res) {
            this.$message.error(res.body.msg || res.msg);
          }.bind(this)
        });
    },
    open() {},
    //关闭弹窗
    handleClose() {
      this.visible = false;
    }
  },
  props: ['param', 'operTypeList', 'groupTplList']
};
</script>

<style type="text/css" lang="scss">
.dig-copy-tpl {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 2022;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .container {
      flex: 1;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .table-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .el-form {
          // height: 100%;
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
