<template>
  <div class="base-screen-container">
    <div>
      <ts-form-item>
        <ts-input
          v-model="selectData.showName"
          title="显示名称"
          @change="refresh(arguments,'showName')"
        ></ts-input>
      </ts-form-item>
      <ts-form-item>
        <ts-select
          :emphasize="true"
          :source="systemConfig"
          v-model="selectData.sysNameCode"
          title="系统名称"
          @selected="refresh(arguments,'sysName')"
        ></ts-select>
      </ts-form-item>
      <ts-form-item>
        <ts-textarea
          v-model="selectData.linkUrl"
          title="链接地址"
          @change="refresh(arguments,'linkUrl')"
        ></ts-textarea>
      </ts-form-item>
      <ts-form-item>
        <ts-upload
          title="显示图标"
          action="/ts-system/file/upload"
          v-model="selectData.showIcon"
          type="image"
          @success="upploadHandler"
        ></ts-upload>
      </ts-form-item>
      <ts-form-item>
        <ts-radio
          title="入口类型"
          v-model="selectData.enterType"
          :data="enterType"
          type="text"
          :isDefaultFirst="true"
          width="97%"
          @change="refresh(arguments, 'enterType')"
        ></ts-radio>
      </ts-form-item>
      <div v-if="selectData.enterType=='DLL'">
        <ts-form-item>
          <ts-select
            :source="menuSelectCfg"
            v-model="selectData.menuId"
            :key="selectData.id+'menuId'"
            :ref="selectData.id+'menuId'"
            title="菜单名称"
            @selected="refresh(arguments,'menuId')"
          ></ts-select>
        </ts-form-item>
      </div>
      <div v-if="selectData.enterType=='sys'">
        <ts-form-item>
          <ts-input
            v-model="selectData.sysCode"
            title="系统编码"
            @change="refresh(arguments,'sysCode')"
          ></ts-input>
        </ts-form-item>
      </div>
      <ts-form-item>
        <ts-input v-model="selectData.token" title="token名" @change="refresh(arguments,'token')"></ts-input>
      </ts-form-item>
      <ts-form-item>
        <ts-input
          v-model="selectData.userCode"
          title="用户代码"
          placeholder="请输入用户代码参数名"
          @change="refresh(arguments,'userCode')"
        ></ts-input>
      </ts-form-item>
      <ts-form-item>
        <ts-input
          v-model="selectData.deptCode"
          title="部门代码"
          placeholder="请输入部门代码参数名"
          @change="refresh(arguments,'deptCode')"
        ></ts-input>
      </ts-form-item>
    </div>
  </div>
</template>
<script>
export default {
  name: 'attrScreen',
  props: ['biCustom'],
  components: {},
  data() {
    return {
      menuData: [],
      menuSelectCfg: {
        dataType: 'local',
        data: this.menuData,
        code: 'id',
        text: 'menuname',
        children: 'menus',
        tree: true,
        isReq: true,
        treeType: 'checkbox',
        // isReq:true,
        value: {
          name: '',
          code: ''
        }
      },
      systemConfig: {
        dataType: 'json',
        url: '/ts-system/api/accesssystem/list',
        method: 'post',
        data: {},
        code: 'chineseCode',
        text: 'chineseName',
        isReq:true,
        condition: 'condition',
        value: {
          name: '',
          code: ''
        }
      },

      enterType: [
        { value: 'DLL', text: 'DLL' },
        { value: 'exe', text: 'exe' },
        { value: 'sys', text: 'sys' }
      ],
      selectData: JSON.parse(JSON.stringify(this.$store.state.bi.selectData))
    }
  },
  computed: {},
  mounted() {
    this.selectData = JSON.parse(JSON.stringify(this.$store.state.bi.selectData))
    this.systemConfig.value = {
      name: this.selectData.sysName,
      code: this.selectData.sysNameCode
    }
    this.loadAppList()
  },
  created() {
    // this.getScreenControlVal()
  },
  methods: {
    loadAppList() {
      // 加载模块配置
      const self = this
      this.$api({
        url: '/ts-system/api/ThpsAppModel/list',
        method: 'GET',
        loading: false
      }).then(function(resp) {
        const rows = resp.rows
        if (rows && rows.length > 0) {
          let sysCodeList = ''
          rows.forEach(item => {
            sysCodeList += item.sysCode + ','
          })
          self.loadMenuList(sysCodeList)
        }
      })
    },
    loadMenuList(sysCodeList) {
      // 加载菜单
      const self = this
      this.$api({
        url: '/ts-system/menu/getfmenus',
        method: 'GET',
        loading: false,
        data: {
          syscode: sysCodeList
        }
      }).then(function(resp) {
        self.menuData = resp.object || []
        self.menuSelectCfg.value = {
          code: self.selectData.menuId || '',
          name: self.selectData.menuName || ''
        }
      })
    },

    upploadHandler(o, src) {
      // 上传回写
      this.selectData.showIcon = o[o.length - 1].url
      this.$store.commit('setSelectData', { ...this.selectData })
      this.$store.commit('saveArr', { data: { ...this.selectData } })
      this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
    },

    getSystemDetail(id) {
      const self = this
      this.$api({
        url: '/ts-system/api/accesssystem/ssocfg/detail/' + id,
        method: 'GET'
      }).then(function(resp) {
        if (resp.success) {
          if (Object.keys(resp.object).length > 0) {
            self.selectData.showName =
              resp.object.displayName || self.selectData.showName
            self.selectData.showIcon =
              resp.object.icon || self.selectData.showIcon
            self.selectData.linkUrl = resp.object.url
            self.selectData.token = resp.object.token
            self.selectData.sysCode = resp.object.sysCode
            self.selectData.userCode = resp.object.userCode
            self.selectData.deptCode = resp.object.deptCode
            self.selectData.menuId = resp.object.menuId
            self.selectData.menuName = resp.object.menuName
            self.menuSelectCfg.value = {
              code: self.selectData.menuId || '',
              name: self.selectData.menuName || ''
            }
            self.$store.commit('setSelectData', { ...self.selectData })
            self.$store.commit('saveArr', { data: { ...self.selectData } })
            self.$store.commit('setNatureArr', {
              ...self.$store.state.bi.natureArr
            })
          }
        } else {
          self.$mModal.message({
            message: resp.message || '获取详情错误.',
            status: 'error'
          })
        }
      })
    },
    refresh(ev, key) {
      this.$nextTick(() => {
        switch (key) {
          case 'sysName': // 系统名称
            this.selectData.sysName = ev[0].chineseName
            this.selectData.sysNameCode = ev[0].chineseCode
            this.selectData.frameType = ev[0].frameType
            this.getSystemDetail(ev[0].id)
            break
          case 'menuId':
            this.selectData.menuName = this.$refs[
              this.selectData.id + 'menuId'
            ].textValue // 赋值
            break
        }
        this.$store.commit('setSelectData', { ...this.selectData })
        this.$store.commit('saveArr', { data: { ...this.selectData } })
        this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
      })
    },
    // 监听数据源
    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.$store.commit('setSelectData', { ...this.selectData })
        this.$store.commit('saveArr', { data: { ...this.selectData } })
        this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
      }
    },
    // 监听数据源字段
    onSelectColSource(ev, item, key) {
      switch (key) {
        case 'unit':
          item.unit = ev.code
          break
        case 'fontSize': //字体大小
          item.fontSize = ev.code
          break
        case 'fontColor': //字体颜色
          item.fontColor = ev
          break
        case 'backgroundColor': //背景颜色
          item.backgroundColor = ev
          break
        case 'showName': //展示名字
          item.showName = ev.value
          break
        case 'selectDataSourceCode': //字段名字
          item.selectDataSourceCode = ev.value
          break
      }
      this.$store.commit('setSelectData', { ...this.selectData })
      this.$store.commit('saveArr', { data: { ...this.selectData } })
      this.$store.commit('setNatureArr', { ...this.$store.state.bi.natureArr })
    }
  },
  watch: {
    menuData(newVal, oldVal) {
      this.menuSelectCfg.data = newVal
    },
    '$store.state.bi.selectData': {
      handler(val) {
        this.selectData = JSON.parse(JSON.stringify(val))
      },
      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 {
  .attr_name {
    font-size: 12px;
    text-align: center;
  }
  .attr_chart_title {
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    font-size: 12px;
  }
}
</style>
