<template>
  <div class="base-screen-container">
    <ts-form-item
      v-if="selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0"
    >
      <ts-select
        :key="'selectDataResult'+selectData.id"
        :source="selectDataSourceResult"
        v-model="selectData.selectDataSourceResult"
        title="图标结果集"
        @selected="refresh(arguments,'selectDataSourceResult')"
      ></ts-select>
    </ts-form-item>
    <ts-form-item>
      <ts-select
        :key="'iconField'+selectData.id"
        :source="dataSourceColSource(this.selectData.selectDataSourceData)"
        v-model="selectData.iconField"
        title="图标字段"
        ref="iconData"
        @selected="refresh(arguments)"
      ></ts-select>
    </ts-form-item>
    <div class="like_form" v-for="(item,j) in selectData.iconList" :key="j">
      <div style="width:52px;">
        <ts-upload
          title
          action="/ts-system/file/upload"
          v-model="item.iconUrl"
          type="image"
          @success="upploadHandler($event, item)"
        ></ts-upload>
      </div>
      <div style="width:10px;"></div>
      <ts-input
        v-model="item.iconValue"
        placeholder="请输入key值"
        width="290px"
        @change="onSelectColSource(arguments, item, 'iconValue',)"
      ></ts-input>
      <div style="width:30px;">
        <ts-button
          id="deleteAutoEdit"
          type="text"
          icon="iconfont icon-Group-17"
          @click="onRelation2('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="onRelation2('add',item.i)"
          class="form-autoEdit-item-add-btn"
        ></ts-button>
      </div>
    </div>
    <ts-form-item>
      <ts-select
        :key="'patient360'+selectData.id"
        :source="dataSourceColSource(this.selectData.selectDataSourceData)"
        v-model="selectData.patient360"
        title="患者360"
        ref="patient360"
        @selected="refresh(arguments)"
      >
        <ts-popover slot="title">
          注：该字段对应的值，将作为EMPID传递给【患者360】模块；
          <br />设置即为具备此功能，与【状态数量】功能互斥，
          <br />并优先级高于【状态数量】；
        </ts-popover>
      </ts-select>
    </ts-form-item>
    <ts-form-item>
      <ts-select
        :key="'numField'+selectData.id"
        :source="dataSourceColSource(this.selectData.selectDataSourceData)"
        v-model="selectData.numField"
        title="状态数量"
        ref="numField"
        @selected="refresh(arguments)"
      >
        <ts-popover slot="title">
          注：该字段对应的值，将作为状态值显示；
          <br />设置即为具备此功能，与【患者360】功能互斥，
          <br />并优先级低于【患者360】；
        </ts-popover>
      </ts-select>
    </ts-form-item>
    <ts-form-item>
      <ts-select
        :key="'imgField'+selectData.id"
        :source="dataSourceColSource(this.selectData.selectDataSourceData)"
        v-model="selectData.imgField"
        title="图片字段"
        ref="imgField"
        @selected="refresh(arguments)"
      ></ts-select>
    </ts-form-item>
    <div v-if="selectData.imgField" class="flexbox">
      <div class="form__title" style="padding:0 5px;">图片大小</div>
      <ts-input
        style="flex:1;"
        v-model="selectData.imgHeight"
        type="integer"
        :clearable="false"
        :min="0"
        placeholder="长度"
        @change="refresh(arguments,'colNumber')"
      ></ts-input>
      <div style="width:10px;"></div>
      <ts-input
        style="flex:1;"
        v-model="selectData.imgWidth"
        type="integer"
        :min="0"
        :clearable="false"
        placeholder="宽度"
        @change="refresh(arguments,'colNumber')"
      ></ts-input>
    </div>
    <div class="form-title_blue">页面元素配置</div>
    <ts-row type="flex">
      <ts-col :flex="1">
        <ts-input
          v-model="selectData.colNumber"
          type="integer"
          :min="1"
          title="列数"
          :clearable="false"
          @change="refresh(arguments,'colNumber')"
        ></ts-input>
      </ts-col>
      <ts-col :flex="1">
        <ts-switch
          title="自动换行"
          on-label="是"
          off-label="否"
          v-model="selectData.br"
          @change="refresh($event,'br')"
          :key="'br'+selectData.id"
        ></ts-switch>
      </ts-col>
    </ts-row>
    <ts-row type="flex">
      <ts-col :flex="1">
        <ts-input
          v-model="selectData.itemHeight"
          :min="1"
          title="块高度"
          :clearable="false"
          @change="refresh(arguments,'itemHeight')"
        ></ts-input>
      </ts-col>
      <ts-col :flex="1">
        <ts-input
          v-model="selectData.itemRadius"
          type="integer"
          :min="0"
          title="块圆角"
          :clearable="false"
          @change="refresh(arguments,'itemHeight')"
        ></ts-input>
      </ts-col>
    </ts-row>
    <ts-row type="flex">
      <ts-col :flex="1">
        <ts-input
          v-model="selectData.itemMargin"
          type="integer"
          :min="0"
          title="行间隔"
          :clearable="false"
          @change="refresh(arguments,'itemMargin')"
        ></ts-input>
      </ts-col>
      <ts-col :flex="1">
        <ts-input
          v-model="selectData.itemMarginCol"
          type="integer"
          :min="0"
          title="列间隔"
          :clearable="false"
          @change="refresh(arguments,'itemMarginCol')"
        ></ts-input>
      </ts-col>
    </ts-row>
    <ts-row type="flex">
      <ts-col :flex="1">
        <ts-input
          v-model="selectData.childTextMargin"
          type="integer"
          :min="0"
          title="块内行间隔"
          :clearable="false"
          @change="refresh(arguments,'childTextMargin')"
        ></ts-input>
      </ts-col>
      <ts-col :flex="1">
        <ts-input
          v-model="selectData.childColNum"
          type="integer"
          :min="0"
          title="块内列数"
          :clearable="false"
          @change="refresh(arguments,'childColNum')"
        >
          <ts-popover slot="title">
            块内参数列数；若为0，则宽度自适应；
            <br />优先级低于【列宽%】
          </ts-popover>
        </ts-input>
      </ts-col>
    </ts-row>
    <ts-row type="flex">
      <ts-col>
          <ts-color-picker v-model="selectData.borderColor" @change="refresh($event,'borderColor')" title="块边框色" colorWidth="46px"></ts-color-picker>
      </ts-col>
      <ts-col>
        <ts-form-item>
          <ts-switch
            title="斑马线"
            v-model="selectData.zebra"
            on-label="是"
            off-label="否"
            @change="refresh($event)"
            :key="'zebra'+selectData.id"
          ></ts-switch>
        </ts-form-item>
      </ts-col>
    </ts-row>
      <ts-color-picker
        v-model="selectData.itemBackground"
        @change="refresh($event,'itemBackground')"
        title="块内背景"
      ></ts-color-picker>
    <tsImgSelect
      title="块大屏边框"
      placeholder
      :source="borderTypeSource"
      v-model="selectData.childBorderType"
      @selected="refresh($event,'childBorderType')"
      :key="'childBorderType'+selectData.id"
    ></tsImgSelect>

    <ts-form-item :titleWidth="110">
      <ts-row class="form-autoEdit-list" style="padding:0 10px" type="flex">
        <div style="width:16px"></div>
        <ts-col :flex="19"></ts-col>
        <ts-col :flex="1"></ts-col>
      </ts-row>
      <ts-row class="form-autoEdit-list">
        <ts-row
          class="form-autoEdddit-item"
          v-for="(item,j) in selectData.dataSourceData"
          :key="j"
          type="flex"
        >
          <ts-col class="form-autoEdit-item-i txt">{{j+1}}</ts-col>
          <ts-col :flex="19">
            <ts-row style="margin-right:10px" type="flex">
              <!-- 结果集 -->
              <ts-col
                :flex="1.5"
                v-if="selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0"
              >
                <ts-select
                  :key="'selectDataResult'+selectData.id"
                  :source="selectDataSourceResult"
                  v-model="item.selectDataSourceResult"
                  @selected="onSelectColSource($event, item, 'selectDataSourceResult')"
                ></ts-select>
              </ts-col>
              <!-- //字段名称 -->
              <ts-col :flex="2" class="mrgr5">
                <ts-select
                  :key="'selectDataCode'+selectData.id"
                  ref="selectDataSourceCode"
                  placeholder="字段"
                  :source="dataSourceColSource(selectData.selectDataSourceResultData&&selectData.selectDataSourceResultData.length>0?item.selectDataSourceCodeOption:selectData.selectDataSourceCodeOption)"
                  v-model="item.field"
                  @selected="refresh($event, item, 'selectDataSourceCode')"
                ></ts-select>
              </ts-col>
              <!-- 单位 -->
              <!-- <ts-col :flex="1">
                    <ts-select
                      v-model="item.unit"
                      :source="unitSource"
                      width="100%"
                      @selected="onSelectColSource($event, item, 'unit')"
                    ></ts-select>
              </ts-col>-->
              <!-- 显示名字 -->
              <ts-col :flex="2">
                <ts-input
                  v-model="item.showName"
                  placeholder="名称"
                  @change="refresh($event, item, 'showName')"
                ></ts-input>
              </ts-col>
            </ts-row>
            <ts-row style="margin:3px 10px 3px 0px;" type="flex">
              <!-- 字体大小 -->
              <ts-col :flex="1" class="mrgr5">
                <ts-input
                  type="number"
                  :min="1"
                  :clearable="false"
                  v-model="item.fontSize"
                  @change="refresh($event, item, 'fontSize')"
                ></ts-input>
              </ts-col>
              <ts-col :flex="1">
                  <ts-color-picker
                    v-model="item.fontColor"
                    @change="refresh($event, item, 'fontColor')"
                    title="字体"
                    colorWidth="46px"
                  ></ts-color-picker>
              </ts-col>
              <ts-col :flex="1">
                  <ts-color-picker
                    v-model="item.backgroundColor"
                    @change="refresh($event, item, 'backgroundColor')"
                    title="背景"
                    colorWidth="46px"
                  ></ts-color-picker>
              </ts-col>
            </ts-row>
            <ts-row type="flex">
              <ts-col :flex="1">
                <ts-select
                  :key="'selectAlign'+selectData.id"
                  ref="selectAlign"
                  placeholder="对齐方式"
                  :source="alignOption"
                  v-model="item.textAlign"
                  @selected="refresh($event, item, 'textAlign')"
                > <ts-popover slot="title">注:若无效果，请设置列宽</ts-popover></ts-select>
              </ts-col>
              <ts-col :flex="2">
                <ts-input
                  type="number"
                  :min="1"
                  :max="100"
                  title="列宽%"
                  :clearable="false"
                  v-model="item.childColW"
                  @change="refresh($event, item, 'childColW')"
                >
                  <ts-popover slot="title">优先级高于【块内列数】</ts-popover>
                </ts-input>
              </ts-col>
            </ts-row>
          </ts-col>
          <ts-col :flex="1">
            <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>
    </ts-form-item>
  </div>
</template>

<script>
import biUtils from '../../utils/biUtils'
export default {
  name: 'attrScreen',
  props: ['biCustom'],
  components: {},
  data() {
    return {
      borderTypeSource: {},
      alignOption: {
        dataType: 'local',
        text: 'label',
        code: 'code',
        data: [
          { code: 'left', label: '居左' },
          { code: 'center', label: '居中' },
          { code: 'right', label: '居右' }
        ],
        isReq: true,
        value: { code: 'left', label: '居左' }
      },
      fontSource: {
        dataType: 'local',
        text: 'label',
        code: 'code',
        data: [
          { code: '12px', label: '12' },
          { code: '13px', label: '13' },
          { code: '14px', label: '14' },
          { code: '15px', label: '15' },
          { code: '16px', label: '16' },
          { code: '17px', label: '17' },
          { code: '18px', label: '18' },
          { code: '19px', label: '19' }
        ],
        isReq: true,
        value: { code: '14px', label: '14' }
      },
      unitSource: {
        dataType: 'local',
        text: 'label',
        code: 'code',
        data: [
          { code: '个', label: '个' },
          { code: '条', label: '条' },
          { code: '兆', label: '兆' },
          { code: '张', label: '张' },
          { code: '次', label: '次' },
          { code: 'KB', label: 'KB' },
          { code: 'MB', label: 'MB' },
          { code: '秒', label: '秒' },
          { code: '毫秒', label: '毫秒' },
          { code: '天', label: '天' },
          { code: '小时', label: '小时' },
          { code: '分', label: '分' },
          { code: '万次', label: '万次' },
          { code: '万条', label: '万条' },
          { code: '万个', label: '万个' },
          { code: '无', label: '无' }
        ],
        isReq: true,
        value: { code: '0', label: '个' }
      },
      color1: '#ccc',
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData))
    }
  },
  computed: {
    // 下拉数据源-显示
    selectDataSourceName() {
      return this.dataSourceColSource(this.selectData.selectDataSourceData)
    },
    screenControlVal() {
      return {
        dataType: 'local',
        code: 'dimensionName',
        text: '_name',
        data: this.getScreenControlVal(),
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    // 下拉数据源-值
    selectDataSourceCode() {
      return this.dataSourceColSource(this.selectData.selectDataSourceData)
    },
    // 下拉数据源-值
    selectDataSourceResult() {
      return this.dataSourceColSource(
        this.selectData.selectDataSourceResultData
      )
    },
    // 输入值
    inputControlValSource() {
      if (this.biCustom) {
        var controlVal = []
        if (this.biCustom.weidu && this.selectData.isDimension == '1') {
          controlVal = JSON.parse(JSON.stringify(this.biCustom.weidu))
          for (var i = 0; i < controlVal.length; i++) {
            if (controlVal[i].dimensionName == 'DIM_DATE_DAY') {
              controlVal.splice(i, 1)
              break
            }
          }
        } else if (this.selectData.isDimension == '0') {
          controlVal = JSON.parse(JSON.stringify(this.biCustom.norm))
        }
      }
      return {
        dataType: 'local',
        code: this.selectData.isDimension == '1' ? 'dimensionName' : '_id',
        choice: true,
        text: '_name',
        data: controlVal,
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    }
  },
  mounted() {
    this.selectData = JSON.parse(JSON.stringify(this.$store.state.bi.selectData))
    // this.dataSourceData.value = {
    //   name: this.selectData.dataSourceName,
    //   code: this.selectData.dataSourceId
    // }
  },
  created() {
    this.borderTypeSource = {
      data: biUtils.getBorderTypes('attrPerson'),
      type: 'iconfont'
    }
    // this.getScreenControlVal()
  },
  methods: {
    // 数据源参数
    dataSourceColSource(data) {
      return {
        dataType: 'local',
        code: 'name',
        text: 'name',
        data: data || [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    refresh(ev, key) {
      this.$nextTick(() => {
        switch (key) {
          case 'selectDataSourceResult': // 结果集
            this.selectData.selectDataSourceData = []
            this.selectData.selectDataSourceResult = ev[0].name
            if (Object.keys(ev[0]).length > 0) {
              for (let items of ev[0].tableColumns) {
                this.selectData.selectDataSourceData.push({
                  name: items.name
                })
              }
            }
            break
          case 'childBorderType':
            this.selectData.childBorderType = ev.code
            break
        }
        this.$store.commit('setSelectData', { ...this.selectData })
        this.$store.commit('saveArr', { data: { ...this.selectData } })
        this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
      })
    },
    onRelation(type, index) {
      //关联指标的操作
      switch (type) {
        case 'add':
          var relation = []
          relation = JSON.parse(JSON.stringify(this.selectData.dataSourceData))[
            this.selectData.dataSourceData.length - 1
          ]
          relation.id = this.$utils.uuid(16)
          relation.i = this.$utils.uuid(16)
          this.selectData.dataSourceData.push(relation)
          break
        case 'delete':
          for (var i = 0; i < this.selectData.dataSourceData.length; i++) {
            if (this.selectData.dataSourceData[i].i == index && index != 0) {
              this.selectData.dataSourceData.splice(i, 1)
              break
            }
          }
          break
      }
      this.refresh()
    },
    onRelation2(type, index) {
      //关联指标的操作
      switch (type) {
        case 'add':
          var relation = {
            i: this.$utils.uuid(16),
            iconUrl: '',
            iconValue: ''
          }
          this.selectData.iconList.push(relation)
          break
        case 'delete':
          for (var i = 0; i < this.selectData.iconList.length; i++) {
            if (this.selectData.iconList[i].i == index && index != 0) {
              this.selectData.iconList.splice(i, 1)
              break
            }
          }
          break
      }
      this.refresh()
    },
    //控件值
    getScreenControlVal() {
      var controlVal = []
      if (Object.keys(this.biCustom).length > 0 || this.biCustom.weidu) {
        controlVal = JSON.parse(JSON.stringify(this.biCustom.weidu))
        for (var i = 0; i < controlVal.length; i++) {
          if (controlVal[i].dimensionName == 'DIM_DATE_DAY') {
            controlVal.splice(i, 1)
            break
          }
        }
      }
      // this.screenControlVal.data = controlVal
      return controlVal
    },

    // 监听数据源字段
    onSelectColSource(ev, item, key) {
      switch (key) {
        case 'selectDataSourceResult': // 下拉数据源-结果集
          this.selectData.selectDataSourceData = []
          item.selectDataSourceResult = ev.name
          item.selectDataSourceCodeOption = []
          for (let items of ev.tableColumns) {
            item.selectDataSourceCodeOption.push({
              name: items.name
            })
          }
          item.field = ''
          this.$store.commit('setSelectData', { ...this.selectData })
          break
      }
      this.refresh()
    },
    upploadHandler(o, item, src) {
      item.iconUrl = o[o.length - 1].url
      this.refresh()
      // 上传回写
    }
  },
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
        if (!this.selectData.dataSourceData) {
          // 处理空数据的部分
          this.selectData.dataSourceData = [
            {
              id: this.$utils.uuid(16),
              i: this.$utils.uuid(16),
              showName: '',
              field: '',
              fontColor: '#333',
              fontSize: 12,
              backgroundColor: '#fff'
            }
          ]
          this.$store.commit('setSelectData', { ...this.selectData })
          this.$store.commit('saveArr', { data: { ...this.selectData } })
          this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
        }
      },
      deep: true
    }
    // biCustom: {
    //   handler(val, old) {
    //     // this.getScreenControlVal()
    //   },
    //   deep: true
    // },
    // 'biCustom.norm': {
    //   handler(val, old) {
    //     // if (this.selectData.state !== '1') {
    //     //   //非时间组件，则清空
    //     //   this.selectData.fieldNamesId = ''
    //     //   this.selectData.fieldNames = ''
    //     //   this.selectData.dimensionLevelId = ''
    //     //   this.selectData.dimensionLevel = ''
    //     // }
    //   },
    //   deep: true
    // }
  }
}
</script>
<style lang="less" scoped>
.base-screen-container {
  .like_form {
    padding: 0 0 5px 100px;
    display: flex;
    align-items: center;
  }
  .form-autoEdit-item-add-btn {
    .vxe-button--icon.iconfont {
      color: var(--base-acv) !important;
    }
  }
  .attr_name {
    font-size: 12px;
    text-align: center;
  }
  .attr_chart_title {
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    font-size: 12px;
  }
  .form-autoEdit-list {
    padding: 0;
    .form-autoEdit-item-i {
      background: rgba(215, 215, 215, 1);
      margin-left: 0px;
    }
    .form-autoEdddit-item {
      display: flex;
      justify-content: center;
      margin-top: 2px;
      padding: 0 10px;
      width: calc(100% - 10px) !important;
      .form__title {
        width: auto;
        padding: 0 5px;
      }
      .txt {
        width: 3px !important;
        height: 23px;
        text-align: center;
        line-height: 23px;
        font-size: 12px;
        color: #555;
      }

      .form__box {
        margin: 0 2px;
      }
      .vxe-input--inner {
        margin: 0 1px;
      }
      .con {
        margin: 5px;
        position: relative;
        display: flex;
        align-items: center;
        // justify-content: space-around;
        // div {
        //   display: flex;
        //   align-items: center;
        //   flex: 1;
        // }
      }
    }
  }
}
.form__title {
  width: 80px;
  padding: 0 5px;
  height: 24px;
  line-height: 24px;
  text-align: right;
  font-size: 12px;
}
</style>
