<template>
  <div>
    <ht-sidebar-dialog
      width="32%"
      title="移动端应用"
      class="sp-manager__dialog"
      :visible="dialogVisible"
      :before-close="handleClose"
    >
      <el-form v-form data-vv-scope="appModelForm">
        <ht-form-item label="分类">
          <template slot="label">
            <el-tooltip placement="top">
              <div slot="content">
                <div>
                  请将应用挂在【应用中心】分类下的1级/2级下，3级及以下的分类不在移动端展示，请注意。
                </div>
              </div>
              <i class="el-icon-question" /> </el-tooltip
            >分类
          </template>
          <!-- <ht-input v-model="appModel.typeId" validate="required" /> -->
          <EipSysTypeSelector
            placeholder="请选择分类"
            typeKey="appType"
            v-model="appModel.typeName"
            :sys-type-id.sync="appModel.typeId"
            :validate="{required: true}"
            class="sys-type-selector"
          />
        </ht-form-item>
        <ht-form-item label="应用名称">
          <ht-input
            v-model="appModel.name"
            validate="required"
            width="260px"
            :maxlength="50"
            :showWordLimit="true"
          />
        </ht-form-item>
        <ht-form-item label="图标">
          <div class="icon-wrap">
            <div class="icon-main">
              <i
                :class="appModel.icon"
                :style="{fontSize: '30px', color: appModel.iconColor}"
                class="app-icon"
              ></i>
            </div>
            <iconDialog @selected="selIcon" />
          </div>
        </ht-form-item>
        <ht-form-item label="图标颜色">
          <ht-input
            v-model="appModel.iconColor"
            width="222px"
            show-word-limit
            placeholder=""
          />
          <el-color-picker
            class="layout_md"
            v-model="appModel.iconColor"
          ></el-color-picker>
          <div class="default-color--list">
            <div
              class="color-item"
              v-for="(item, index) in colorList"
              :key="index"
              @click="handleColor(item)"
              :style="{background: item}"
            ></div>
          </div>
        </ht-form-item>
        <ht-form-item label="跳转模式">
          <template slot="label">
            <el-tooltip placement="top">
              <div slot="content">
                <div>
                  1、站内地址：可跳转到指定vue路由路径，如：跳转到我的待办，可填写为：/work/myMatters
                </div>
                <div>
                  2、跳转网页地址：跳转到站外的地址，如：http://www.hotent.com
                </div>
                <div>3、表单列表：跳转至指定的表单列表页面</div>
                <div>4、图表：跳转至指定的图表页面</div>
                <div>5、新建流程：跳转至启动流程页面</div>
              </div>
              <i class="el-icon-question" /> </el-tooltip
            >跳转模式
          </template>
          <ht-select
            :disabled="true"
            v-model="appModel.mode"
            :options="typeOptions"
            validate="required"
            class="width-input"
          />
        </ht-form-item>
        <ht-form-item :label="contentLabel">
          {{ contentStr }}
        </ht-form-item>
        <!-- <ht-form-item label="路由路径" v-if="appModel.mode === 1">
          <ht-input
            v-model="appModel.content"
            validate="required"
            width="260px"
            placeholder="请填写vue路由路径"
          />
        </ht-form-item>
        <ht-form-item label="网页地址" v-if="appModel.mode === 2">
          <ht-input
            v-model="appModel.content"
            validate="required"
            width="260px"
            placeholder="请填写http/https开头的站外地址"
          />
        </ht-form-item>

        <ht-form-item label="表单列表" v-if="appModel.mode === 3">
          <ht-input
            v-model="appModel.tempName"
            validate="required"
            width="260px"
            placeholder="请选择表单列表"
            readonly
          >
            <el-button
              slot="append"
              @click="$refs.dataTemplateDialog.showDialog()"
              >选择</el-button
            >
          </ht-input>
        </ht-form-item>

        <ht-form-item label="选择图表" v-if="appModel.mode === 4">
          <eip-chart-selector
            validate="required"
            :dataParam.sync="appModel.content"
            :chartType="2"
          ></eip-chart-selector>
        </ht-form-item>
        <ht-form-item label="选择流程" v-if="appModel.mode === 5">
          <ht-input
            v-model="appModel.tempName"
            validate="required"
            width="260px"
            placeholder="请选择流程"
          >
            <el-button slot="append" @click="$refs.eipFlowDialog.showDialog()"
              >选择</el-button
            >
          </ht-input>
        </ht-form-item>
        <ht-form-item label="datav大屏" v-if="appModel.mode === 9">
          <ht-select
            v-model="appModel.tempAlias"
            :options="datavList"
            validate="required"
            class="width-input"
            :props="{key: 'alias', value: 'name'}"
            @change="datavChange"
          />
        </ht-form-item> -->
        <ht-form-item label="排序">
          <ht-input
            v-model="appModel.sn"
            validate="required"
            type="number"
            width="260px"
          />
        </ht-form-item>
      </el-form>
      <div slot="footer" style="text-align: right">
        <el-button @click="handleClose">{{
          $t('eip.common.cancel')
        }}</el-button>
        <ht-submit-button
          url="${portal}/portal/appModel/v1/save"
          :model="appModel"
          scope-name="appModelForm"
          @after-save-data="afterSaveData"
          @before-save-data="beforeSaveData"
          >{{ $t('eip.common.save') }}</ht-submit-button
        >
      </div>
    </ht-sidebar-dialog>
  </div>
</template>

<script>
const EipSysTypeSelector = () =>
  import('@/components/selector/EipSysTypeSelector.vue')
const iconDialog = () => import('@/components/dialog/IconDialog.vue')
export default {
  components: {
    EipSysTypeSelector,
    iconDialog,
  },
  data() {
    return {
      dialogVisible: false,
      appModel: {
        icon: '',
        iconColor: '',
        content: '',
        typeName: '',
        typeId: '',
      },
      typeOptions: [
        {key: 1, value: '站内地址'},
        {key: 2, value: '跳转网页地址'},
        {key: 3, value: '表单列表'},
        {key: 4, value: '图表'},
        {key: 5, value: '新建流程'},
        {key: 9, value: 'datav大屏'},
      ],
      contentLabel: '',
      contentStr: '',
      colorList: [
        '#409EFF',
        '#07C160',
        '#4053FF',
        '#F6B85A',
        '#FF8A46',
        '#8550E1',
      ],
    }
  },
  methods: {
    showDialog(content, mode) {
      this.appModel.content = content
      this.contentLabel = this.typeOptions.filter((item) => {
        return item.key === mode
      })[0].value
      this.contentStr = JSON.parse(content).name
      this.appModel.mode = mode
      this.appModel.iconColor = '#409EFF'
      this.appModel.icon = 'icon-application1'
      this.dialogVisible = true
    },
    handleClose() {
      this.$set(this, 'appModel', {
        icon: '',
        iconColor: '',
        content: '',
        typeName: '',
        typeId: '',
      })
      this.dialogVisible = false
    },
    handleColor(color) {
      this.appModel.iconColor = color
    },
    handleConfirm() {},
    beforeSaveData() {},
    afterSaveData() {
      this.handleClose()
    },
    selIcon(item) {
      this.$set(this.appModel, 'icon', item)
    },
  },
}
</script>

<style lang="scss" scoped>
.sp-manager__dialog /deep/ > .el-dialog > .el-dialog__body {
  height: calc(100% - 190px);
}

.icon-wrap {
  display: flex;
  align-items: center;
  margin-top: -5px;
  .icon-main {
    width: 40px;
    height: 40px;
    background: rgb(244, 244, 244);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    text-align: center;
  }
}

.default-color--list {
  display: flex;
  margin-top: 10px;
  .color-item {
    margin-right: 8px;
    height: 24px;
    width: 24px;
    border-radius: 4px;
    cursor: pointer;
  }
}

.layout_md {
  vertical-align: middle;
  /deep/.el-color-picker__trigger {
    border-color: #dcdfe6;
  }
}
</style>