<template>
  <div>
    <div class="addContent">
<!--      450-->
      <el-form :model="{tableData}" ref="form" >
        <el-table v-loading = "loading"  element-loading-text="拼命加载中" :data=" (tableData || []).slice(
                (this.page - 1) * this.size,
                (this.page - 1) * this.size + this.size
              )" :height="tableHeight" style="width:100%">
          <el-table-column type="index" label="序号" width="70" fixed="left"></el-table-column>
          <el-table-column label="字段名称" width="120" >
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.fieldNameEn'"
                            :rules="[
                    { required: true, message: '请输入字段名' },
                    // {
                    //   pattern: /^[0-9a-zA-Z_.]+$/,
                    //   message: '请勿输入特殊字符',
                    // },
                  ]"
              >
                <el-input
                    :disabled="scope.row.isDisabled"
                    style="width:100px;"
                    show-word-limit
                    type="text"
                    placeholder="字段名称"
                    v-model="scope.row.fieldNameEn"
                    maxlength="50"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="中文名称" width="120" >
            <template slot-scope="scope">
              <el-form-item
                  :prop="'tableData.' + scope.$index + '.fieldNameCn'"
                  :rules="[
                    // { required: true, message: '请输入中文名' },
                    { pattern: /^[\u4E00-\u9FA50-9a-zA-Z_\-.]+$/, message: '请勿输入特殊字符' }
                  ]"
              >
                <el-input
                    style="width:100px;"
                    show-word-limit
                    type="text"
                    placeholder="中文名称"
                    v-model="scope.row.fieldNameCn"
                    maxlength="50"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="数据类型"  width="120" >
            <template slot-scope="scope">
              <el-select
                  style="width:100px;"
                  v-model="scope.row.type"
                  placeholder="类型"
                  filterable
                  @change="typeChange"
              >
                <el-option v-for="item in typeList" :key="item.id" :value="item"> </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="长度"  width="100" >
            <template slot-scope="scope">
              <el-form-item
                  :prop="'tableData.' + scope.$index + '.length'"
                  :rules="[
                    // { required: true, message: '请输入长度' },
                    { pattern: /^[0-9]+$/, message: '请输入纯数字' }
                  ]"
              >
                <el-input
                    style="width:80px;"
                    type="text"
                    placeholder="请输入长度"
                    v-model="scope.row.length"
                    maxlength="50"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="主键">
            <template slot-scope="scope">
              <!--             :disabled="scope.row.ifOldField == true"-->
              <el-switch
                  v-model="scope.row.isPk"
                  on-text="是"
                  off-text="否"
                  active-value="true"
                  inactiove-value="false"
                  @change="checkPk(scope.row,'isPk')"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="关联字典" width="120">
            <template slot-scope="scope">
              <el-select
                  style="width:100px;"
                  v-model="scope.row.dictionaryType"
                  placeholder="关联字典"
                  filterable
                  @change="typeChange"
              >
                <el-option v-for="item in dicList" :key="item.id" :value="item.name"> </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="排序" width="100" >
            <template slot-scope="scope">
              <!--            <el-form-item >-->
              <!--            style="margin-bottom: 0px;"-->
              <el-input
                  style="width:80px;"
                  min="1"
                  type="number"
                  placeholder="排序"
                  v-model="scope.row.sort"
                  maxlength="50"
              ></el-input>
              <!--            </el-form-item>-->
            </template>
          </el-table-column>
          <el-table-column label="验证规则" width="150">
            <template slot-scope="scope">
              <el-input
                  style="width:140px"
                  type="text"
                  placeholder="验证规则"
                  v-model="scope.row.rule"
                  maxlength="501"
              >
                <i slot="suffix" class="el-input__icon el-icon-date ruleStyle" @click="ruleData(scope.row)"></i>
              </el-input>
            </template>
          </el-table-column>
          <el-table-column label="默认值" width="120">
            <template slot-scope="scope">
              <!--              style="margin-bottom: 0px;"-->
              <el-input
                  style="width:100px;"
                  show-word-limit
                  type="text"
                  placeholder="请输入信息"
                  v-model="scope.row.defaultValue"
              ></el-input>
            </template>
          </el-table-column>
          <!--        <el-table-column label="关联表" width="120">-->
          <!--          <template slot-scope="scope">-->
          <!--            <el-select-->
          <!--                style="width:100px;"-->
          <!--                v-model="scope.row.relation_dictionary"-->
          <!--                placeholder="关联表"-->
          <!--                filterable-->
          <!--            >-->
          <!--              <el-option v-for="item in dataSheet" :key="item.id" :value="item.value.nameCn"> </el-option>-->
          <!--            </el-select>-->
          <!--          </template>-->
          <!--        </el-table-column>-->
          <!--        <el-table-column label="关联字段"  width="120">-->
          <!--          <template slot-scope="scope">-->
          <!--            <el-input-->
          <!--                style="width:100px;"-->
          <!--                show-word-limit-->
          <!--                type="text"-->
          <!--                placeholder="关联字段"-->
          <!--                v-model="scope.row.relation_field"-->
          <!--            ></el-input>-->
          <!--          </template>-->
          <!--        </el-table-column>-->
          <el-table-column label="是否查询"  width="100">
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.isQuery"
                  on-text="是"
                  off-text="否"
                  active-value="true"
                  inactiove-value="false"
                  @change="checkPk(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="业务主键">
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.isBizPk"
                  on-text="是"
                  off-text="否"
                  active-value="true"
                  inactiove-value="false"
                  @change="checkPk(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="是否NULL" width="100">
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.isNull"
                  on-text="是"
                  off-text="否"
                  active-value="true"
                  inactiove-value="false"
                  @change="checkPk(scope.row,'isNull')"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="空间字段">
            <template slot-scope="scope">
              <el-switch
                  v-model="scope.row.isGeom"
                  on-text="是"
                  off-text="否"
                  active-value="true"
                  inactiove-value="false"
                  @change="checkPk(scope.row)"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="计算字段" width="120">
            <template slot-scope="scope">
              <!--              style="margin-bottom: 0px;"-->
              <el-input
                  style="width:100px;"
                  show-word-limit
                  type="text"
                  placeholder="计算字段"
                  v-model="scope.row.calcField"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="描述" width="120">
            <template slot-scope="scope">
              <!--              style="margin-bottom: 0px;"-->
              <el-input
                  style="width:100px;"
                  show-word-limit
                  type="text"
                  placeholder="描述"
                  v-model="scope.row.desc"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="删除" width="80"  fixed="right">
            <template slot-scope="scope">
              <el-button
                  @click.native.prevent="deleteField(scope.row, scope.$index)"
                  type="text"
                  size="small"
              >
                <i class="el-icon-delete" ></i>&nbsp;&nbsp;删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData && tableData.length"
            style="text-align: right"
        >
        </el-pagination>
      </el-form>
    </div>
  </div>
</template>

<script>
import {queryImportTable} from "../../views/resource/dataset/service";


export default {
  name: "index.vue",
  props:{
    tableData:{
      type:Array,
      default: []
    },
    tableId:{
      type:String,
      default: ""
    },
    dicList:{
      type:Array,
      default:[]
    },
    dataSheet:{
      type:Array,
      default:[]
    },
  },
  created() {
    let heightStyle = document.body.clientHeight;
    this.tableHeight = heightStyle - 510
    // console.log("tableHeight", this.tableHeight)

  },

  watch: { //监听父组件传过来的selectItems
    tableData: {
      handler(newVal,oldVal){
        for(let i = 0; i < newVal.length; i++) {
          // newVal[i].isDisabled = true;
        }
      },
      immediate:true,//immediate:true代表如果在 wacth 里声明了之后，就会立即先去执行里面的
      //handler方法,//如果为 false，不会在绑定的时候就执行。
      deep:true//deep，默认值是 false，代表是否深度监听。
    }
  },
  data(){
    return{
      loading:false,
      ruleForm: {
        nameEn: [
          {
            required: true,
            message: "请填写英文名称",
          },
        ],
        nameCn: [
          {
            required: true,
            message: "请输入中文名称",
          },
        ],
      },
      page: 1,
      total:0,
      size:10,
      tableHeight:0,
      typeList:[
        "text",
        "char",
        "varchar",
        "int8",
        "int4",
        "int2",
        "float4",
        "float8",
        "money",
        "bit",
        "numeric",
        "bool",
        "timestamp",
        "time",
        "date",
        "bytea",
        "box",
        "cidr",
        "inet",
        "macaddr",
        "varbit",
        "circle",
        "interval",
        "line",
        "lseg",
        "polygon",
        "point",
        "path",
        "geometry",
      ]
    }
  },
  methods:{
    //显示验证规则弹窗
    ruleData(data) {
      console.log("data", data)
      this.$emit("getRuleDataPage", data)
    },
    setLoading(data) {
      this.loading = data
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    getTableData() {
      this.page = 1;
      this.size = 10;
    },
    goCurrent() {
      let cur = parseInt(this.tableData.length/10);
      let m = this.tableData.length%10;
      if( this.tableData.length > 10 ){
        this.page = cur+1;
      }
      this.$nextTick(() => {
        let container = this.$el.querySelector('.addContent .el-table__body-wrapper');
        container.scrollTop = container.scrollHeight;
      })
    },
    //switch 开关
    checkPk(data,type){
      console.log("checkdata",data, data.isPk, data.isNull)
      if(data.isNull == "true") {
        if(data.defaultValue == '' || data.defaultValue.trim()=='') {
          this.$message({
            message: data.fieldNameEn+'请输入默认置',
            type: 'warning',
            duration:1500
          });
        }
      }
      if(type == 'isNull') {
        data.isPk = false
      }
      if(type == 'isPk') {
        data.isNull = false
      }
      if(data.isPk == 'true' && data.isNull == false) {
        // console.log("进入测试")
        this.tableData.forEach(item=>{
          if(item.id == data.id) {
            // console.log("进入测试2",item)
            item.isNull = true
          }
        })
        this.$nextTick(()=>{
          this.tableData.push({})
          this.tableData.pop()
        })
      }
    },
    getArrayIndex(arr, obj) {
      var i = arr.length;
      while (i--) {
        if (arr[i] === obj) {
          return i;
        }
      }
      return -1;
    },
    deleteField(data, index){
      console.log("删除data:", data,"index", index)
      if (data.ifOldField === true) {
        this.$alert(
            "仅支持物理表字段添加,如需修改或删除物理表字段,需手动操作数据库",
            "提示",
            {
              dangerouslyUseHTMLString: false,
              showConfirmButton: true,
            }
        );
      } else {
        // this.tableData.splice(index, 1);
        for(let i = 0; i < this.tableData.length; i++) {
          if(this.tableData[i].tmpid == data.tmpid) {
            let index = this.getArrayIndex(this.tableData,data)
            console.log("index", index)
            this.tableData.splice(index, 1);
            return
          }
        }
      }
    }
  },
}
</script>

<style scoped lang="less">
.addContent {
  .el-dialog__body .topForm {
    display: flex;
    .el-form-item--small .el-form-item__error {
      padding-top: 0px;
    }
    .elButton {
      .el-form-item__content {
        margin-left: 10px !important;
      }
    }
  }
  .el-table__body .cell .el-form-item--small.el-form-item {
    margin-bottom: 16px;
    margin-top: 15px;
  }
  .el-table--small th {
    padding: 8px 0;
  }
  .el-table td {
    padding: 0px 0;
  }
  .el-input--small {
    width: 250px;
  }

  .el-button--small {
    margin-left: 8px;
  }
}
/*.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{*/
/*  margin-bottom: 15px !important;*/
/*}*/
</style>
