<template>
  <div class="base-screen-container">
    <!-- <ts-form-item>
      <ts-input v-model="selectData.cellId" title="单元格" disabled readonly ></ts-input>
    </ts-form-item>-->
    <!-- 是否默认筛选 -->
    <!-- 日程 -->
    <template v-if="!selectData.viewType || selectData.viewType==0||selectData.viewType==2">
      <attr-data-source ref="attrDS" :isShowResult="true" titleName="数据源配置(日)"></attr-data-source>
      <ts-form-item v-if="selectData.dsType == '1'">
        <ts-row type="flex">
          <ts-col :flex="1">
            <ts-input
              v-model="selectData.dateParam"
              title="入参"
              placeholder="时间参数"
              @selected="refresh(arguments,'selectDataSourceBegin')"
            ><tsPopover slot="titleAfter">【时间参数】值为当前选中的日期，<br />格式为：yyyy-mm-dd hh:mm:ss</tsPopover>
            </ts-input>
          </ts-col>
        </ts-row>
      </ts-form-item>
      <ts-form-item v-if="!selectData.dsType ||selectData.dsType == '0'">
        <ts-select
          v-model="selectData.dateParam"
          :source="paramSource"
          :key="selectData.id+'dateParam2222'"
          title="入参"
          placeholder="时间参数"
          @selected="refresh($event,'dateParam')"
        ><tsPopover slot="titleAfter">【时间参数】值为当前选中的日期，<br />格式为：yyyy-mm-dd hh:mm:ss</tsPopover></ts-select>
      </ts-form-item>
      <!-- <div class="form__title">出参</div> -->

      <ts-form-item>
        <ts-select
          v-model="selectData.dayTime"
          :source="dayContentSource"
          :key="selectData.id+'dayContent2222'"
          placeholder="时间字段"
          title="出参"
          @selected="refresh($event,'dayContent')"
        ><tsPopover slot="titleAfter">【时间字段】对应日程中时间段值的显示</tsPopover></ts-select>
      </ts-form-item>
      <ts-form-item>
        <ts-select
          v-model="selectData.dayContent"
          :source="dayContentSource"
          :key="selectData.id+'dayContent2222'"
          placeholder="日程字段"
          title=" "
          @selected="refresh($event,'dayContent')"
        ><tsPopover slot="titleAfter">【日程字段】对应某时间段下日程内容的显示</tsPopover></ts-select>
      </ts-form-item>
    </template>
    <!-- 周 -->
    <template v-if="selectData.viewType==1||selectData.viewType==2">
      <attr-data-source
        ref="attrDS"
        :isShowResult="true"
        :isOtherSelectData="true"
        :otherSelectData="selectData.weekDSData"
        titleName="数据源配置(周)"
        @setStoreArr="setStoreArrOther(arguments,'weekDSData')"
      ></attr-data-source>
      <template v-if="selectData.weekDSData">
        <!-- 入参 -->
        <template v-if="!selectData.weekDSData.dsType ||selectData.weekDSData.dsType == '0'">
          <ts-form-item>
            <ts-select
              v-model="selectData.weekDSData.startDate"
              :source="weekContentParamSource"
              :key="selectData.id+'startDate'"
              placeholder="开始时间"
              @selected="refresh($event,'startDate')"
              title="入参"
            ><tsPopover slot="titleAfter">【开始时间】值为当前选中的日期的“开始时间”，<br />格式为：yyyy-mm-dd</tsPopover></ts-select>
          </ts-form-item>
          <ts-form-item>
            <ts-select
              v-model="selectData.weekDSData.endDate"
              :source="weekContentParamSource"
              :key="selectData.id+'endDate'"
              placeholder="结束时间"
               title=" "
              @selected="refresh($event,'endDate')"
            ><tsPopover slot="titleAfter">【结束时间】值为当前选中的日期的“结束时间”，<br />格式为：yyyy-mm-dd</tsPopover></ts-select>
          </ts-form-item>
        </template>
        <!-- 入参-URL-->
        <template v-if="selectData.weekDSData.dsType == '1'">
          <ts-form-item>
            <ts-input
              v-model="selectData.weekDSData.startDate"
              title="入参"
              placeholder="开始时间"
              @change="refresh(arguments,'startDate')"
            ><tsPopover slot="titleAfter">【开始时间】值为当前选中的日期的“开始时间”，<br />格式为：yyyy-mm-dd</tsPopover></ts-input>
          </ts-form-item>
          <ts-form-item>
            <ts-input
              v-model="selectData.weekDSData.endDate"
              placeholder="结束时间"
              title=" "
              @change="refresh(arguments,'endDate')"
            ><tsPopover slot="titleAfter">【结束时间】值为当前选中的日期的“结束时间”，<br />格式为：yyyy-mm-dd</tsPopover></ts-input>
          </ts-form-item>
        </template>
        <ts-form-item>
          <ts-select
            v-model="selectData.weekDSData.title"
            :source="weekContentSource"
            :key="selectData.id+'titl222e'"
            placeholder="标题字段"
            @selected="refresh($event,'title')"
            title="出参"
          ><tsPopover slot="titleAfter">【标题字段】对应日程中标题值的显示，<br />如：“临床”/“门诊”等</tsPopover></ts-select>
        </ts-form-item>
        <ts-form-item>
          <ts-select
            v-model="selectData.weekDSData.dayNum"
            :source="weekContentSource"
            :key="selectData.id+'dayNum'"
            placeholder="时间(第几天)"
            @selected="refresh($event,'dayNum')"
            title=" "
          >
          <tsPopover slot="titleAfter">【时间】对应日程中第几周，<br />如周一为“0”---周日为“6”，为"Number"类型</tsPopover>
          </ts-select>
        </ts-form-item>
        <ts-form-item>
          <ts-select
            v-model="selectData.weekDSData.content"
            :source="weekContentSource"
            :key="selectData.id+'content'"
            placeholder="内容详情"
            @selected="refresh($event,'content')"
            title=" "
          > <tsPopover slot="titleAfter">【内容详情】对应具体的排班内容，<br />鼠标放上去显示的详情内容值</tsPopover></ts-select>
        </ts-form-item>
        <ts-form-item>
          <ts-select
            v-model="selectData.weekDSData.timeType"
            :source="weekContentSource"
            :key="selectData.id+'timeType'"
            placeholder="时间段"
            @selected="refresh($event,'timeType')"
            title=" "
          ><tsPopover slot="titleAfter">【时间段】对应这最左处的具体时间段值，<br />如“上午”/“下午”/“晚上”等</tsPopover></ts-select>
        </ts-form-item>
      </template>
    </template>
    <div class="form-title_blue">页面元素配置</div>
    <ts-form-item>
      <ts-radio
        title="显示模式"
        v-model="selectData.showType"
        :data="showType"
        type="group"
        :isDefaultFirst="true"
        @change="refresh(arguments, 'showType')"
      ></ts-radio>
    </ts-form-item>
    <ts-form-item v-if="selectData.showType!='month'">
      <ts-radio
        title="视图模式"
        v-model="selectData.viewType"
        :data="viewTypeSource"
        type="group"
        :isDefaultFirst="true"
        @change="refresh(arguments, 'viewType')"
      ></ts-radio>
    </ts-form-item>
    <ts-form-item>
      <ts-switch
        title="添加功能"
        v-model="selectData.isHasAdd"
        on-label="是"
        off-label="否"
        @change="refresh($event, 'isHasAdd')"
        :key="selectData.id"
      ></ts-switch>
    </ts-form-item>
    <attr-data-source
      ref="attrDSAdd"
      :isShowResult="true"
      :isOtherSelectData="true"
      :otherSelectData="selectData.addDSData"
      titleName="数据源配置(添加)"
      @setStoreArr="setStoreArrOther(arguments,'addDSData')"
      v-if="selectData.isHasAdd"
    ></attr-data-source>
    <template v-if="selectData.isHasAdd&&selectData.addDSData">
      <!-- 入参 -->
      <template v-if="!selectData.addDSData.dsType ||selectData.addDSData.dsType == '0'">
        <ts-form-item>
          <ts-select
            v-model="selectData.addDSData.title"
            :source="addParamSource"
            :key="selectData.id+'addTitle'"
            placeholder="标题"
            @selected="refresh($event,'addTitle')"
            :title="'入参'"
          ></ts-select>
        </ts-form-item>
        <ts-form-item>
          <ts-select
            v-model="selectData.addDSData.stateDate"
            :source="addParamSource"
            :key="selectData.id+'addStateDate'"
            placeholder="开始时间(yyyy-mm-dd hh:mm:ss)"
            @selected="refresh($event,'endDate')"
            :title="' '"
          ></ts-select>
        </ts-form-item>
        <ts-form-item>
          <ts-select
            v-model="selectData.addDSData.endDate"
            :source="addParamSource"
            :key="selectData.id+'addEndDate'"
            placeholder="结束时间(yyyy-mm-dd hh:mm:ss)"
            @selected="refresh($event,'endDate')"
            :title="' '"
          ></ts-select>
        </ts-form-item>
      </template>
      <!-- 入参-URL-->
      <template v-if="selectData.addDSData.dsType == '1'">
        <ts-form-item>
          <ts-input
            v-model="selectData.addDSData.title"
            title="入参"
            placeholder="标题"
            @change="refresh(arguments,'title')"
          ></ts-input>
        </ts-form-item>
        <ts-form-item>
          <ts-input
            v-model="selectData.addDSData.stateDate"
            placeholder="开始时间(yyyy-mm-dd hh:mm:ss)"
            @change="refresh(arguments,'stateDate')"
            :title="' '"
          ></ts-input>
        </ts-form-item>
        <ts-form-item>
          <ts-input
            v-model="selectData.addDSData.endDate"
            placeholder="结束时间(yyyy-mm-dd hh:mm:ss)"
            @change="refresh(arguments,'endDate')"
            :title="' '"
          ></ts-input>
        </ts-form-item>
      </template>
    </template>
  </div>
</template>

<script>
import attrDataSource from './attrDataSource'
export default {
  name: 'attrScreen',
  props: ['biCustom'],
  components: { attrDataSource },
  data() {
    return {
      showType: [
        { value: 'month', text: '月' },
        { value: 'weekcol', text: '周(横向)' },
        { value: 'weekrow', text: '周(竖向)' }
      ],
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData)),
      // // 数据源
      // dataSourceData: {
      //   dataType: 'json',
      //   url: '/ts-query/api/user/define/service/list',
      //   method: 'post',
      //   contentType: 'application/x-www-form-urlencoded',
      //   page: 'pageNo',
      //   data: {
      //     sord: 'desc',
      //     pageSize: 200,
      //     pageNo: 1
      //   },
      //   code: 'id',
      //   text: 'queryName',
      //   condition: 'condition',
      //   isReq: true,
      //   value: {
      //     name: '',
      //     code: ''
      //   }
      // }
    }
  },
  computed: {
    viewTypeSource() {
      let arry = [
        { value: '0', text: '日程' },
        { value: '1', text: '排班' }
      ]
      if (this.selectData.showType == 'weekcol') {
        arry.push({ value: '2', text: '综合' })
      }
      return arry
    },
    // 排版字段
    weekContentSource() {
      return this.dataSourceColSource(
        this.selectData.weekDSData
          ? this.selectData.weekDSData.selectDataSourceCodeOption
          : []
      )
    },
    // 排版 参数
    weekContentParamSource() {
      return this.dataSourceColSource(
        this.selectData.weekDSData
          ? this.selectData.weekDSData.selectDataSourceParams
          : []
      )
    },
    // 添加 参数
    addParamSource() {
      return this.dataSourceColSource(
        this.selectData.addDSData
          ? this.selectData.addDSData.selectDataSourceParams
          : []
      )
    },
    // 日程字段
    dayContentSource() {
      return this.dataSourceColSource(
        this.selectData.selectDataSourceCodeOption
      )
    },
    // 参数
    paramSource() {
      return this.dataSourceColSource(this.selectData.selectDataSourceParams)
    }
  },
  mounted() {},
  created() {
    // this.getScreenControlVal()
  },
  methods: {
    // 数据源参数
    dataSourceColSource(data) {
      return {
        dataType: 'local',
        code: 'name',
        text: 'name',
        data: data || [],
        isReq: true,
        value: {
          name: '',
          code: ''
        }
      }
    },
    // 改变参数值
    changValue(ev, item) {
      item.value = ev.value
      this.setStoreArr()
    },
    refresh(ev, key) {
      this.$nextTick(() => {
        switch (key) {
          case 'showType': // 显示模式
            if (
              this.selectData.showType == 'month' ||
              (this.selectData.viewType == 2 &&
                this.selectData.showType == 'weekrow')
            ) {
              // 恢复视图模式
              this.selectData.viewType = '0'
            }
            break
          case 'viewType': // 显示模式
            if (
              (this.selectData.viewType == '1' ||
                this.selectData.viewType == '2') &&
              !this.selectData.weekDSData
            ) {
              // 恢复视图模式
              this.selectData.weekDSData = {}
            }
            break
          case 'isHasAdd': // 是否添加
            if (this.selectData.isHasAdd && !this.selectData.addDSData) {
              this.selectData.addDSData = {}
            }
            break
        }
        this.setStoreArr()
      })
    },
    onSelectDataSource(ev, item) {
      if (ev.conditionDefine) {
        item.conditionData = []
        for (let con of JSON.parse(ev.conditionDefine)) {
          item.conditionData.push({
            columnType: con.columnType,
            value: con.value,
            defaultValue: con.defaultValue,
            name: con.name
          })
        }
        item.dataSourceCol = ''
        this.$refs['colSource' + item.i][0].source.data = item.conditionData
        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 })
    },
    // 保存另外一个
    setStoreArrOther(param, key) {
      this.selectData[key] = param[0]
      this.setStoreArr()
    },
    // 监听数据源字段
    onSelectColSource(ev, item) {
      item.dataSourceCol = ev.name
      item.columnType = ev.columnType
      item.defaultValue = ev.defaultValue
      // item.value = ev.defaultValue
      this.setStoreArr()
    }
  },
  watch: {
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
      },
      deep: true
    }
  }
}
</script>
<style lang="less" scoped>
.base-screen-container {
  .attr_chart_title {
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    font-size: 12px;
  }
  /deep/ .el-checkbox__label {
    font-size: 12px;
  }
  .form-title-child {
    width: calc(100% - 75px);
    margin-left: 75px;
  }
}
</style>
