<template>
  <j-editable-table
    ref="editableTable"
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    :maxHeight="319"
    :rowNumber="true"
    :disabledRows="{dbFieldName: 'id'}"
    @valueChange="valueChange"
  />
</template>

<script>

import {FormTypes} from '@/utils/JEditableTableUtil'
import {syncAllTable} from '@views/codegen/form/util/TableUtils';

let commonPageOptions = [
  {"title": "文本框", "value": "text"},
  {"title": "密码", "value": "password"},
  {"title": "下拉框", "value": "list"},
  {"title": "单选框", "value": "radio"},
  {"title": "多选框", "value": "checkbox"},
  {"title": "开关", "value": "switch"},
  {"title": "日期(yyyy-MM-dd)", "value": "date"},
  {"title": "日期（yyyy-MM-dd HH:mm:ss）", "value": "datetime"},
  {"title": "时间（HH:mm:ss）", "value": "time"},
  {"title": "文件", "value": "file"},
  {"title": "图片", "value": "image"},
  {"title": "多行文本", "value": "textarea"},
  {"title": "下拉多选框", "value": "list_multi"},
  {"title": "下拉搜索框", "value": "sel_search"},
  {"title": "Popup弹框", "value": "popup"},
  {"title": "分类字典树", "value": "cat_tree"},
  {"title": "部门选择", "value": "sel_depart"},
  {"title": "用户选择", "value": "sel_user"},
  {"title": "富文本", "value": "umeditor"},
  {"title": "MarkDown", "value": "markdown"},
  {"title": "省市区组件", "value": "pca"},
  {"title": "联动组件", "value": "link_down"},
  {"title": "自定义树控件", "value": "sel_tree"}
]

let subTablePageOptions = [
  {"title": "文本框","value": "text"},
  {"title": "单选框","value": "radio"},
  {"title": "开关","value": "switch"},
  {"title": "日期(yyyy-MM-dd)","value": "date"},
  {"title": "日期（yyyy-MM-dd HH:mm:ss）","value": "datetime"},
  {"title": "时间（HH:mm:ss）","value":"time"},
  {"title": "文件","value":"file"},
  {"title": "图片","value":"image"},
  {"title": "下拉框","value":"list"},
  {"title": "下拉多选框","value":"list_multi"},
  {"title": "下拉搜索框","value":"sel_search"},
  {"title": "popup弹出框","value":"popup"},
  {"title": "部门选择","value":"sel_depart"},
  {"title": "用户选择","value":"sel_user"},
  {"title": "多行文本","value":"textarea"}
];

let groupPageOptions = [
  {"title": "任务信息","value": "task"},
  {"title": "基本信息","value": "basic"},
  {"title": "规范性信息","value": "common"},
  {"title": "附件资料","value": "other"},
];

export default {
  name: "PageAttributeTable",
  components: {},
  inject: ["getAllTable"],
  data() {
    let _self = this;
    return {
      loading: false,
      dataSource: [],
      groupOptions: [
        {"title": "任务信息","value": "task"},
        {"title": "基本信息","value": "basic"},
        {"title": "规范性信息","value": "common"},
        {"title": "附件资料","value": "other"},
      ],
      columns: [
        {
          title: "字段名称",
          key: "dbFieldName",
          width: "100px",
          type: FormTypes.input,
          defaultValue: "",
          placeholder: "",
          props: { disabled: true }
        },
        {
          title: "字段备注",
          key: "dbFieldTxt",
          width: "140px",
          type: FormTypes.input,
          defaultValue: "",
          placeholder: "",
          props: { disabled: true }
        },
        {
          title: "表单显示",
          key: "isShowForm",
          width: "40px",
          type: FormTypes.checkbox,
          customValue: ["1", "0"],
          defaultChecked: true
        },
        {
          title: "列表显示",
          key: "isShowList",
          width: "40px",
          type: FormTypes.checkbox,
          customValue: ["1", "0"],
          defaultChecked: true
        },
        {
          title: "是否排序",
          key: "sortFlag",
          width: "40px",
          type: FormTypes.checkbox,
          customValue: ["1", "0"],
          defaultChecked: false
        },
        {
          title: "是否只读",
          key: "isReadOnly",
          width: "40px",
          type: FormTypes.checkbox,
          customValue: ["1", "0"],
          defaultChecked: false
        },
        {
          title: "字段所属",
          key: "fieldBelong",
          width: "170px",
          type: FormTypes.select,
          options: groupPageOptions,
          defaultValue: "task",
          placeholder: "请选择${title}",
          validateRules: [
            {required: true, message: "请选择${title}"},
          ]
        },
        {
          title: "控件类型",
          key: "fieldShowType",
          width: "170px",
          type: FormTypes.select,
          options: commonPageOptions,
          defaultValue: "text",
          placeholder: "请选择${title}",
          validateRules: [
            {required: true, message: "请选择${title}"},
            {
              handler: function (type, value, row, column, callback, target) {
                if ("blur" !== type) {
                  _self.getAllTable().then(function (tables) {
                    let table1 = tables[0];

                    let dbType = table1.$refs.editableTable.getValuesSync({validate: false, rowIds: [row.id]}).values[0].dbType;
                    if ("time" === dbType && "string" !== dbType) {
                      callback(false, "当控件类型为时间时,数据库属性里的字段类型必须是String！")
                    } else if ("date" === value && "Date" !== dbType && "Datetime" !== dbType) {
                      callback(false, "当控件类型为date时，数据库属性里的字段类型请设置为Date！")
                    } else if ("datetime" === value && "Date" !== dbType && "Datetime" !== dbType) {
                      callback(false, "当控件类型为datetime时，数据库属性里的字段类型请设置为Datetime！")
                    } else {
                      callback(true)
                    }

                  }).catch(function (e) {
                    callback(false, "校验出错")
                  })
                } else {
                  callback()
                }
              },
              message: "${title}校验失败"
            }
          ]
        },
        {
          title: "控件长度",
          key: "fieldLength",
          width: "100px",
          type: FormTypes.inputNumber,
          defaultValue: "200",
          placeholder: "请输入${title}",
          validateRules: [
            {required: false, message: "${title}不能为空"}
          ]
        },
        {
          title: "是否查询",
          key: "isQuery",
          width: "60px",
          type: FormTypes.checkbox,
          customValue: ["1", "0"],
          defaultChecked: false
        },
        {
          title: "查询类型",
          key: "queryMode",
          width: "110px",
          type: FormTypes.select,
          options: [
            {title: "普通查询", value: "single"},
            {title: "范围查询", value: "group"}
          ],
          defaultValue: "single",
          placeholder: "请选择${title}",
          validateRules: [{required: true, message: "请选择${title}"}]
        },
        {
          title: "控件默认值",
          key: "fieldDefaultValue",
          width: "180px",
          type: FormTypes.input,
          defaultValue: ""
        },
        {
          title: "扩展参数",
          key: "fieldExtendJson",
          width: "160px",
          type: FormTypes.input,
          defaultValue: ""
        },
        {
          title: "自定义转换器",
          key: "converter",
          width: "160px",
          type: FormTypes.input,
          defaultValue: ""
        }
      ]
    }
  },
  methods: {
    syncTable(target) {
      syncAllTable(this, target)
    },
    syncFieldShowType(row) {
      let showType = "date";
      if (row.dbType === "Datetime") {
        showType = "datetime";
      }
      this.$refs.editableTable.setValues([{
        rowKey: row.id,
        values: { fieldShowType: showType }
      }]);
    },
    changePageType(isSubTable) {
      for(let column of this.columns){
        if (column.key === "fieldShowType") {
          column.options = (isSubTable ? subTablePageOptions : commonPageOptions);
          break
        }
      }
    },
    enableQuery(id) {
      this.$refs.editableTable.setValues([{
        rowKey: id,
        values: { isQuery: "1" }
      }]);
    },
    /**
     * 值改变后回调
     * @param event 包含的属性
     */
    valueChange(event){
      let { type, row, column, value, target } = event;
    },
    changeGroupOption(groupList){
      let groupOptionList = [];
      // 转换成 select 选项
      groupList.forEach((item)=> {
        let option = {
          title: item.groupName,
          value: item.groupCode
        }
        groupOptionList.push(option);
      })
      this.columns[6].options = groupOptionList;
    }
  }
}
</script>

<style scoped>

</style>