<template>
  <div class="base-col-container">
    <template>
      <ts-form-item v-if="selectData.pid">
        <ts-select
          title="数据列"
          :key="'selectDataCode'+selectData.id"
          ref="selectDataSourceCode"
          :source="selectDSCodeSource"
          v-model="selectData.targetName"
          @selected="refresh($event,'targetName')"
        ></ts-select>
      </ts-form-item>
      <ts-form-item>
        <ts-input
          v-model="selectData.title"
          :emphasize="true"
          title="显示名"
          @change="refresh(arguments)"
        ></ts-input>
      </ts-form-item>
      <ts-form-item>
        <ts-input v-model="selectData.helpDetail" title="表头提示" @change="refresh(arguments)"></ts-input>
      </ts-form-item>

      <ts-form-item>
        <ts-radio
          title="对齐方式"
          v-model="selectData.align"
          :data="algin"
          :isDefaultFirst="true"
          type="group"
          width="97%"
          @change="refresh(arguments)"
        ></ts-radio>
      </ts-form-item>
      <ts-row type="flex">
        <ts-col :flex="1">
          <ts-form-item>
            <ts-input
              v-model="selectData.width"
              title="宽度"
              :clearable="false"
              type="number"
              :min="0"
              @change="refresh($event,'width')"
            >
              <ts-popover slot="title">若为0，则宽度自适应；</ts-popover>
            </ts-input>
          </ts-form-item>
        </ts-col>
        <ts-col :flex="1">
          <ts-form-item>
            <ts-input
              v-model="selectData.fontSize"
              title="字体大小"
              :clearable="false"
              type="number"
              :min="0"
              @change="refresh($event,'fontSize')"
            ></ts-input>
          </ts-form-item>
        </ts-col>
      </ts-row>

      <ts-form-item>
        <ts-select
          :source="filterOption"
          v-model="selectData.filter"
          title="格式化"
          type="select"
          @change="refresh($event,'filter')"
        ></ts-select>
      </ts-form-item>
      <div style="display:flex;">
        <ts-color-picker
          v-model="selectData.fontColor"
          @change="refresh($event, 'fontColor')"
          title="字体色"
          colorWidth="46px"
        ></ts-color-picker>
        <ts-color-picker
          v-model="selectData.backgroundColor"
          @change="refresh($event, 'backgroundColor')"
          title="背景色"
          colorWidth="46px"
        ></ts-color-picker>
      </div>
      <ts-row type="flex">
        <ts-col :flex="1">
          <ts-form-item>
            <ts-switch
              title="冻结列"
              :key="selectData.id"
              v-model="selectData.isFreeze"
              on-label="是"
              off-label="否"
              @change="refresh(arguments)"
            ></ts-switch>
          </ts-form-item>
        </ts-col>
      </ts-row>
      <template v-if="!selectData.isHasChild">
        <ts-row type="flex">
          <ts-col :flex="1">
            <ts-form-item>
              <ts-switch
                title="增减标识"
                :key="'showUpDownIcon'+selectData.id"
                v-model="selectData.showUpDownIcon"
                on-label="是"
                off-label="否"
                @change="refresh(arguments,'showUpDownIcon')"
              ></ts-switch>
            </ts-form-item>
          </ts-col>
          <ts-col :flex="1">
            <ts-form-item>
              <ts-switch
                title="排序"
                :key="selectData.id"
                v-model="selectData.sortable"
                on-label="是"
                off-label="否"
                @change="refresh(arguments,'sortable')"
              ></ts-switch>
            </ts-form-item>
          </ts-col>
        </ts-row>
        <ts-form-item>
          <ts-switch
            title="合计"
            :key="'isCount'+selectData.id"
            v-model="selectData.isCount"
            on-label="是"
            off-label="否"
            @change="refresh(arguments,'isCount')"
          ></ts-switch>
        </ts-form-item>
      </template>
      <template v-if="selectData.pid">
        <ts-form-item v-if="!selectData.isChild">
          <div class="flexbox form__box" style="width:95%">
            <div class="title form__title">操作列</div>
            <div class="flex">
              <ts-button @click="optCol('add')" class="mrgl5">插入</ts-button>
              <ts-button @click="optCol('del')" class="mrgl5">删除</ts-button>
            </div>
          </div>
        </ts-form-item>
        <div v-if="selectData.isCommon">
          <ts-form-item :titleWidth="110">
            <div>
              <div class="attr_col_title">
                <span class="red2">*</span>
                关联指标（指标1/指标2）
              </div>
              <div class="flex">
                <div class="form-autoEdit-list">
                  <div
                    class="form-autoEdit-item flexbox"
                    v-for="(item,j) in selectData.relationTarget"
                    :key="j"
                  >
                    <div class="form-autoEdit-item-i txt">{{j+1}}</div>
                    <div class="con2 flex">
                      <ts-select
                        v-model="item.model"
                        :source="commonDeploy"
                        :name="item.name"
                        @selected="onSelectCommon($event,item)"
                      ></ts-select>
                      <ts-button
                        id="deleteAutoEdit"
                        type="text"
                        icon="iconfont icon-Group-17"
                        @click="onRelation('delete',item.i)"
                        v-if="selectData.targetId==='7'&&j!=0"
                      ></ts-button>
                      <ts-button
                        v-if="selectData.targetId==='7'&&j===0"
                        id="addAutoEdit"
                        type="text"
                        icon="iconfont icon-Group-13"
                        @click="onRelation('add',item.i)"
                        class="form-autoEdit-item-add-btn"
                      ></ts-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </ts-form-item>
        </div>
        <ts-form-item>
          <ts-switch
            title="含子列"
            v-model="selectData.isHasChild"
            on-label="是"
            off-label="否"
            @change="refresh(arguments,'isHasChild')"
          ></ts-switch>
        </ts-form-item>
        <div v-if="selectData.isHasChild">
          <ts-form-item :titleWidth="110" class="child-contanier">
            <div>
              <div class="attr_chart_title">子列设置</div>
              <ts-row class="form-autoEdit-list">
                <ts-row
                  class="form-autoEdddit-item"
                  style="width:100%;"
                  v-for="(item,j) in selectData.children"
                  :key="j"
                  type="flex"
                >
                  <ts-col :flex="1">
                    <span class="txt">{{j+1}}</span>
                  </ts-col>
                  <ts-col :flex="16">
                    <ts-row type="flex">
                      <ts-col :flex="1">
                        <ts-select
                          :key="'dataSourceId'+item.i"
                          v-model="item.targetId"
                          :source="childDatas()"
                          placeholder="数据列"
                          width="99%"
                          @selected="onSelectDataSource($event,item)"
                        ></ts-select>
                      </ts-col>
                      <ts-col :flex="1">
                        <ts-input
                          v-model="item.title"
                          width="100%"
                          placeholder="列名"
                          @change="onTitle($event,item,'title')"
                        ></ts-input>
                      </ts-col>
                    </ts-row>
                  </ts-col>
                  <ts-col>
                    <ts-button
                      id="deleteAutoEdit"
                      type="text"
                      icon="iconfont icon-Group-17"
                      @click="onRelation('delete',item.i)"
                      v-if="j!=0"
                    ></ts-button>
                    <ts-button
                      v-if="j===0"
                      id="addAutoEdit"
                      type="text"
                      icon="iconfont icon-Group-13"
                      @click="onRelation('add',item.i)"
                      class="form-autoEdit-item-add-btn"
                    ></ts-button>
                  </ts-col>
                </ts-row>
              </ts-row>
            </div>
          </ts-form-item>
        </div>
      </template>
      <attrLink></attrLink>
    </template>
  </div>
</template>

<script>
import attrLink from './attrLink'
import natureArrMixins from '../mixins/natureArrMixins'
import biUtils from '../../utils/biUtils'
export default {
  name: 'attr-Col',
  props: ['biCustom'],
  mixins: [natureArrMixins],
  components: { attrLink },
  data() {
    return {
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      biSelectTable: JSON.parse(
        JSON.stringify(this.$store.state.bi.biSelectTable)
      ), //被选择的table对象
      algin: [
        { value: 'left', text: '靠左' },
        { value: 'center', text: '居中' },
        { value: 'right', text: '靠右' }
      ],
      filterOption: {
        dataType: 'local',
        code: 'id',
        text: 'name',
        data: [
          { name: '千分位', id: '1' },
          { name: 'YYYY-MM-DD', id: '2' },
          { name: 'YYYY-MM-DD  HH-mm-ss', id: '3' },
          { name: '保留两位小数', id: '4' },
           { name: '去除千分位', id: '5' }
        ],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      },
      childDatasList: [] //子列
    }
  },
  computed: {
    // 下拉数据源-值
    selectDataSourceResult() {
      return biUtils.dataSourceColSource(
        this.biSelectTable.selectDataSourceResultData
      )
    },
    selectDSCodeSource() {
      // 不存在数据源 - 使用父级table数据列
      return biUtils.dataSourceColSource(
        this.biSelectTable.selectDataSourceCodeOption
      )
    },
    cellData() {
      return {
        dataType: 'local',
        code: '_id',
        text: '_name',
        data: this.biCustom ? this.biCustom.norm : [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    commonDeploy() {
      return {
        dataType: 'local',
        code: '_id',
        text: '_name',
        data: (this.biCustom && this.biCustom.norm) || [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 子类数据
    childDatas() {
      if (this.childDatasList.length == 0) {
        let natureArr = this.$store.state.bi.natureArr[
          'd' + (this.$store.state.bi.dialogEditors.length - 1)
        ]
        let table = this.getNatureArrByid(natureArr, this.selectData.pid)
        
        if (table.dataSourceId) {
          for (let ds of this.$store.state.bi.dataSource) {
            if (table.dataSourceId == ds.id) {
              if (table.dataSource&&table.dataSource.serviceType == 2) {
                // 结果集
                for (let item of JSON.parse(ds.columnDefine)) {
                  if (item.name == table.dataSource.resultName) {
                    this.childDatasList = item.tableColumns
                    break
                  }
                }
              } else {
                if (ds.columnDefine) {
                  this.childDatasList = JSON.parse(ds.columnDefine)
                }
              }

              break
            }
          }
        } else if (table.reqUrl) {
          //假如是自定义服务
          if (
            table.selectDataSourceCodeOption &&
            table.selectDataSourceCodeOption.length > 0
          ) {
            let dataChild = table.selectDataSourceCodeOption
            dataChild.forEach(re => {
              re.title = re.name
            })
            this.childDatasList = dataChild
          }
        }
      }
      return {
        dataType: 'local',
        code: 'name',
        text: 'title',
        data: this.childDatasList || [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },

    refresh(ev, key) {
      this.$nextTick(() => {
        switch (key) {
          case 'targetId':
            this.selectData.targetName = ev._name
            this.selectData.measureName = ev.measureName
            this.selectData.title = ev._name
            break
          case 'targetName':
            this.selectData.title = ev.name
            this.selectData.targetId = ev.name
            break
          case 'width':
            this.selectData.width = ev.value ? parseInt(ev.value) : 0
            if (this.selectData.width == 0) {
              delete this.selectData.width
            }
            break
          case 'fontSize':
            this.selectData.fontSize = ev.value ? parseInt(ev.value) : 0
            break
          case 'sortable':
            // 动真格的时候才调用
            this.$eventBus.$emit('refreshTable' + this.selectData.pid)
            break
          case 'isHasChild': // 是否含子类
            if (this.selectData.isHasChild == '') {
              return
            }
            this.selectData.isHasChild = ev[0]
            if (
              this.selectData.isHasChild &&
              (!this.selectData.children ||
                this.selectData.children.length == 0)
            ) {
              this.selectData.children = []
              this.selectData.children.push({
                id: this.$utils.uuid(16),
                i: this.$utils.uuid(16),
                isChild: true, // 是否是子列
                title: '',
                align: 'center',
                field:
                  this.selectData.id +
                  +'' +
                  (this.selectData.children.length + 1),
                width: 60,
                fontSize: 12,
                sortable: false,
                fontColor: '#333',
                backgroundColor: '',
                targetId: '',
                targetName: '',
                pid: this.selectData.pid,
                resizable: false
              })
            }
            // 动真格的时候才调用
            this.$eventBus.$emit('refreshTable' + this.selectData.pid)
            break
        }
        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 })
    },
    optCol(label) {
      switch (label) {
        case 'add':
          this.$eventBus.$emit('addCol', this.selectData)
          break
        case 'del':
          this.$eventBus.$emit('deleteCol', this.selectData)
          break
      }
    },
    // 初始化数据
    initData() {
      this.$nextTick(() => {
        if(this.biSelectTable.isCount&&typeof this.selectData.isCount=='undefined'){ // 兼容整体合计
          this.selectData.isCount = true
        }
        // this.selectData.sortable = this.selectData.sortable
        this.selectData.isHasChild = this.selectData.isHasChild ? true : false
        this.$forceUpdate()
      })
    },
    //------------------------------------------------子列设置-------------------------
    onSelectDataSource(ev, item) {
      item.targetId = ev.title
      item.targetName = ev.title
      item.title = ev.title
      this.setStoreArr()
    },
    onTitle(ev, item) {
      item.title = ev.value
      this.setStoreArr()
    },
    //------------------------------------------------关联指标配置-------------------------
    // 选择后赋值
    onSelectCommon(row, item) {
      item.id = row.id
      item.name = row._name
      item.measureName = row.measureName
      this.setStoreArr()
    },
    onRelation(type, index) {
      //关联指标的操作
      switch (type) {
        case 'add':
          var relation = {
            id: this.$utils.uuid(16),
            i: this.$utils.uuid(16),
            isChild: true, // 是否是子列
            title: '',
            helpDetail: '',
            align: 'center',
            field:
              this.selectData.id + +'' + (this.selectData.children.length + 1),
            width: 60,
            fontSize: 12,
            fontColor: '#333',
            backgroundColor: '',
            targetId: '',
            targetName: '',
            sortable: false,
            pid: this.selectData.pid,
            resizable: false
          }
          relation.id = this.$utils.uuid(16)
          this.selectData.children.push(relation)
          break
        case 'delete':
          for (var i = 0; i < this.selectData.children.length; i++) {
            if (this.selectData.children[i].i == index && index != 0) {
              this.selectData.children.splice(i, 1)
              break
            }
          }
          break
      }
      this.setStoreArr()
    }
  },
  mounted() {},
  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))
      }
    }

    // biCustom: {
    //   handler(val) {
    //     this.cellData.data = val.norm
    //   },
    //   deep: true
    // }
  }
}
</script>
<style lang="less" scoped>
.base-col-container {
  // .form__box {
  //   margin: 0;
  // }
  .attr_chart_title {
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    font-size: 12px;
  }
  .child-contanier .form-autoEdit-list {
    padding-left: 10px;
    .txt {
      background: rgba(215, 215, 215, 1);
      padding: 1px 2px;
    }
  }
  .attr_col_title {
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    width: 150px;
    text-align: right;
    font-size: 12px;
  }
  .form-autoEdit-list {
    padding-left: 30px;
    .form-autoEdit-item-i {
      background: rgba(215, 215, 215, 1);
      margin-left: 10px;
    }
    .child-contanier {
      .txt {
        margin-top: 8px;
        width: 12px !important;
        height: 18px;
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        color: #555;
      }
    }
    .form-autoEdit-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
      .txt {
        margin-top: 8px;
        width: 12px !important;
        height: 18px;
        text-align: center;
        line-height: 18px;
        font-size: 12px;
        color: #555;
      }
      .form-autoEdit-item-add-btn {
        .vxe-button--icon.iconfont {
          color: var(--base-acv) !important;
        }
      }
      .form__box {
        margin: 0 2px;
      }
      .vxe-input--inner {
        margin: 0 1px;
      }
      .con2 {
        margin: 5px;
        position: relative;
        display: flex;
        align-items: center;
        // justify-content: space-around;
        // div {
        //   display: flex;
        //   align-items: center;
        //   flex: 1;
        // }
      }
    }
  }
}
</style>
