<template>
  <div class="base-detail-container">
    <attr-data-source
      ref="attrDS"
      :isChangeDSIdBefore="true"
      @changeDSIdBefore="changeDSIdBefore"
      @changedDSId="changedDSId"
      :isShowResult="true"
      @changedDSResult="changedDSResult"
      testText="解析"
      :isOnTestBefore="true"
      @testBeforeEvent="testBeforeEvent"
    ></attr-data-source>
    <div class="form-title_blue">页面元素配置</div>
    <!-- <div class="form-title_blue">属性设置</div> -->
    <!-- <ts-form-item style="margin-top:5px">
      <ts-input v-model="selectData.controlType" title="控件类型" disabled readonly ></ts-input>
    </ts-form-item>-->
    <!-- <ts-form-item v-if="selectData.type == 'table'">
      <ts-input v-model="selectData.dataSourceName" title="数据源" disabled readonly ></ts-input>
    </ts-form-item>-->
    <!-- <ts-form-item>
        <ts-select
          v-model="selectData.dataSourceId"
          :source="dataSourceData"
          title="数据源"
          
          @selected="refresh($event,'dataSourceId')"
        ></ts-select>
    </ts-form-item>-->
    <!-- 这个数据源留给多个数据源参数一致的时候 放开 方便配置表格 -->
    <!-- <div class="form-title_blue">表格属性设置</div> -->
    <ts-row type="flex">
      <ts-col :flex="1">
        <ts-switch
          title="基础表"
          v-model="selectData.baseTable"
          on-label="是"
          off-label="否"
          @change="refresh($event,'baseTable')"
          :key="'baseTable'+selectData.id"
        ></ts-switch>
      </ts-col>
      <ts-col :flex="1">
        <ts-switch
          title="显示行号"
          v-model="selectData.rownumbers"
          on-label="是"
          off-label="否"
          @change="refresh($event)"
          :key="'rownumbers'+selectData.id"
        ></ts-switch>
      </ts-col>
    </ts-row>
    <template v-if="!selectData.baseTable">
      <ts-form-item>
        <ts-row type="flex">
          <ts-col :flex="1">
            <ts-switch
              title="关闭分页"
              v-model="selectData.offPage"
              on-label="是"
              off-label="否"
              @change="refresh($event)"
              :key="'offPage'+selectData.id"
            ></ts-switch>
          </ts-col>

          <ts-col :flex="1">
            <ts-switch
              title="是否树形"
              v-model="selectData.treeNode"
              on-label="是"
              off-label="否"
              :key="'treeNode'+selectData.id"
              @change="refresh($event)"
            ></ts-switch>
          </ts-col>
        </ts-row>
      </ts-form-item>
      <ts-form-item>
        <ts-row type="flex">
          <!-- <ts-col :flex="1">
            <ts-switch
              title="是否合计"
              v-model="selectData.isCount"
              on-label="是"
              off-label="否"
              @change="refresh($event)"
              :key="'isCount'+selectData.id"
            ></ts-switch>
          </ts-col> -->
          <ts-col :flex="1">
            <ts-switch
              title="显示表头"
              v-model="selectData.showHeader"
              on-label="是"
              off-label="否"
              @change="refresh($event)"
              :key="'showHeader'+selectData.id"
            ></ts-switch>
          </ts-col>
        </ts-row>
      </ts-form-item>
      <ts-form-item>
        <ts-row type="flex">
          <ts-col :flex="1">
            <ts-switch
              title="表头换行"
              v-model="selectData.headerOverflow"
              on-label="是"
              off-label="否"
              @change="refresh($event)"
              :key="'headerOverflow'+selectData.id"
            ></ts-switch>
          </ts-col>
          <ts-col :flex="1">
            <ts-switch
              title="隐藏多功能"
              v-model="selectData.isHideFunc"
              on-label="是"
              off-label="否"
              @change="refresh($event)"
              :key="'isHideFunc'+selectData.id"
            ></ts-switch>
          </ts-col>
        </ts-row>
      </ts-form-item>
      <ts-form-item>
        <ts-row type="flex">
          <ts-col :flex="1">
            <ts-switch
              title="列宽拖动"
              v-model="selectData.resizable"
              on-label="是"
              off-label="否"
              @change="refresh($event)"
              :key="'resizable'+selectData.id"
            ></ts-switch>
          </ts-col>
          <ts-col :flex="1">
            <ts-switch
              title="显示搜索"
              v-model="selectData.showSearch"
              on-label="是"
              off-label="否"
              @change="refresh($event)"
              :key="'showSearch'+selectData.id"
            ></ts-switch>
          </ts-col>
        </ts-row>
      </ts-form-item>
      <ts-form-item>
        <ts-row type="flex">
          <ts-col :flex="1">
            <ts-switch
              title="可导出"
              v-model="selectData.isExport"
              on-label="是"
              off-label="否"
              @change="refresh($event)"
              :key="'isExport'+selectData.id"
            ></ts-switch>
          </ts-col>
          <ts-col :flex="1">
            <ts-switch
              title="可打印"
              v-model="selectData.isPrint"
              on-label="是"
              off-label="否"
              @change="refresh($event)"
              :key="'isPrint'+selectData.id"
            ></ts-switch>
          </ts-col>
        </ts-row>
      </ts-form-item>
      <ts-form-item v-if="selectData.treeNode">
        <ts-select
          title="树参数名"
          :key="'selectCode'+selectData.id"
          ref="selectDataSourceCode"
          :source="selectDSCodeSource(selectData.selectDataSourceCodeOption||selectData.dataSourceDataColumnLable||[])"
          v-model="selectData.lazyId"
          @selected="refresh($event,'LazyId')"
        ></ts-select>
      </ts-form-item>
      <ts-form-item>
        <!-- <ts-radio
          title="边框"
          v-model="selectData.border"
          :data="borderSource"
          type="group"
          :isDefaultFirst="true"
          :key="'border222'+selectData.id"
          @change="refresh(arguments, 'border')"
        ></ts-radio> -->
                <ts-select
          title="边框"
         :key="'border222'+selectData.id"
          :source="borderOption"
          v-model="selectData.border"
          @selected="refresh($event,'border')"
        ></ts-select>
      </ts-form-item>
      <div style="display:flex;">
        <div class="form__title">背景</div>
        <el-checkbox
          v-model="selectData.stripe"
          @change="refresh(arguments,'stripe')"
          true-label="true"
          false-label="false"
        >交替颜色</el-checkbox>
      </div>
      <div style="display:flex;">
        <ts-color-picker
          v-model="selectData.backgroundColor"
          @change="refresh($event, 'backgroundColor')"
          title="颜色"
          colorWidth="60px"
        ></ts-color-picker>
        <ts-color-picker
          v-model="selectData.anotherBackgroundColor"
          :disabled="isStripe"
          title="交替"
          @change="refresh($event, 'backgroundColor')"
          colorWidth="60px"
        ></ts-color-picker>
      </div>
      <div style="display:flex;">
        <ts-color-picker
          v-model="selectData.headBackground"
          @change="refresh($event, 'headBackground')"
          title="表头背景"
          colorWidth="60px"
        ></ts-color-picker>
        <ts-color-picker
          v-model="selectData.headColor"
          @change="refresh($event, 'headColor')"
          title="表头字体"
          colorWidth="60px"
        ></ts-color-picker>
      </div>
    </template>
  </div>
</template>

<script>
import attrDataSource from './attrDataSource'
import biUtils from '../../utils/biUtils'
export default {
  name: 'attr-base',
  props: {},
  components: { attrDataSource },
  data() {
    return {
      biSelectTable: JSON.parse(
        JSON.stringify(this.$store.state.bi.biSelectTable)
      ), //被选择的table对象
      // 数据源
      dataSourceData: {
        dataType: 'local',
        code: 'id',
        data: this.$store.state.bi.dataSource,
        text: 'queryName',
        condition: 'condition',
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      isStripe: true,
            borderOption:{
            dataType: 'local',
        code: 'value',
        text: 'text',
        data: [   { value: 'full', text: '全边框' },
        { value: 'inner', text: '内边框' },
        { value: 'outer', text: '外边框' },
        { value: 'none ', text: '无' }],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      borderSource: [
        { value: 'full', text: '全边框' },
        { value: 'inner', text: '内边框' },
        { value: 'outer', text: '外边框' },
        { value: 'none ', text: '无' }
      ],
      isDown: [
        { name: '显示表头', value: 1, text: '显示表头' },
        { name: '无缝滚动', value: 2, text: '无缝滚动' },
        { name: '显示网格线', value: 3, text: '显示网格线' }
      ],
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      headerList: [{ id: '', name: '', i: 0 }],
      pageInfoloading: false,
      isColsNull: true,
      savedObj: {} //被保存的对象
    }
  },
  computed: {
    //     selectDSCodeSource() {
    //   // 不存在数据源 - 使用父级table数据列
    //   return biUtils.dataSourceColSource(
    //     this.biSelectTable.selectDataSourceCodeOption
    //   )
    // },
  },
  created() {},
  methods: {
    selectDSCodeSource(data) {
      return biUtils.dataSourceColSource(data || [])
    },
    isDownValueFn() {},
    // 改变数据源前
    async changeDSIdBefore(ev) {
      // const _this = this
      // // 需判断单元格是否被编辑过
      // this.isColsNull = _this.setIsColsNull()
      // if (this.isColsNull) {
      //   //空列刷新数据源
      this.$refs.attrDS.refresh(ev, 'dataSourceId')
      // } else {
      //   await this.$mModal
      //     .confirm('更改数据源，会导致单元格配置清空，是否继续更改？')
      //     .then(type => {
      //       if (type == 'confirm') {
      //         _this.$refs.attrDS.refresh(ev, 'dataSourceId')
      //       } else {
      //         _this.setStoreArr()
      //       }
      //     })
      // }
    },
    // 解析之前
    async testBeforeEvent() {
      const _this = this
      // // 需判断单元格是否被编辑过
      // this.isColsNull = _this.setIsColsNull()
      // if (this.isColsNull) {
      //空列刷新数据源
      _this.$refs.attrDS.testURL()
      // } else {
      //   await this.$mModal
      //     .confirm('重载数据源，会导致单元格配置清空，是否继续更改11？')
      //     .then(type => {
      //       if (type == 'confirm') {
      //         _this.$refs.attrDS.testURL()
      //       } else {
      //         _this.setStoreArr()
      //       }
      //     })
      // }
    },
    // 是否为空单元格
    setIsColsNull() {
      for (let col of this.selectData.cols) {
        if (col.title && (col.targetId || col.targetName)) {
          return false
        }
      }
      return true
    },
    // 监听数据源字段
    changedDSResult(ev) {
      this.selectData.title = ''
      this.selectData.targetName = '' // 清空数据列
      this.selectData.targetId = '' // 清空数据列
      this.setStoreArr()
    },
    setStoreArr() {
      this.$store.commit('setSelectData', { ...this.selectData })
      this.$store.commit('saveArr', { data: { ...this.selectData } })
      this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
    },
    changedDSId() {
      if (!this.isColsNull) {
        //清空单元格
        this.selectData.cols = biUtils.getColNullFn(this.selectData.id)
        this.setStoreArr()
      }
    },
    refresh(ev, arrKey) {
      this.$nextTick(() => {
        switch (arrKey) {
          case 'stripe':
            this.isStripe = ev[0] != 'true'
            break
          case 'dataSourceId':
            this.selectData.dataSourceName = ev.queryName
            break
          case 'baseTable': // 基础表
            let baseTableObj = {
              treeNode: false,
              isCount: false,
              offPage: true,
              isHideFunc: true,
              showHeader: true,
              border: 'none',
              headerOverflow: false,
              headBackground: '#f5f5f5',
              headColor: '#444',
              resizable: false
            }
            if (this.selectData.baseTable) {
              this.savedObj = {
                // 保存当前选择状态
                treeNode: this.selectData.treeNode,
                isCount: this.selectData.isCount,
                offPage: this.selectData.offPage,
                isHideFunc: this.selectData.isHideFunc,
                showHeader: this.selectData.showHeader,
                border: this.selectData.border,
                headerOverflow: this.selectData.headerOverflow,
                headBackground: this.selectData.headBackground,
                headColor: this.selectData.headColor,
                resizable: this.selectData.resizable
              }
              // 是基础表格
              Object.assign(this.selectData, baseTableObj)
            } else {
              Object.assign(this.selectData, this.savedObj) // 恢复默认状态
            }
            break
        }
        if (
          this.selectData.cols[0].type === 'seq' ||
          (this.selectData.cols[0].title == '#' &&
            !this.selectData.cols[0].field)
        ) {
          //存在老版本行号，删除，统一用rownumbers来判断
          this.selectData.cols.splice(0, 1)
        }
        this.setStoreArr()
      })
    },
    initData() {
      this.isStripe = this.selectData.stripe != 'true'
      this.selectData.headBackground =
        this.selectData.headBackground || '#f5f5f5'
      this.selectData.resizable = this.selectData.resizable != false
      this.$forceUpdate()
    }
  },
  mounted() {
    this.initData()
  },
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
        this.initData()
      }
    },
    '$store.state.bi.biSelectTable': {
      // 监听父级table
      handler(val) {
        
        this.biSelectTable = JSON.parse(JSON.stringify(val))
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-checkbox__label {
  font-size: 12px;
}

.stripeColor {
  height: 25px;
  line-height: 25px;
  width: 70px;
  font-size: 12px;
  text-indent: 6px;
}
</style>
