<template>
  <div class="taskConfig">
    <div class="taskConfig__h">
      <p class="taskConfig__h--p">{{$t('test_31')}}</p>
    </div>
    <Table border :columns="columnsList" :data="dataList" :loading="listLoad" class="taskConfig__tab">
      <template slot-scope="{ row,index }" slot="title" >
        <p>{{ row.title }}</p>
      </template>
      <template slot-scope="{ row,index }" slot="param" >
        <div v-if="row.type === 'App.Auth.UserLogin'" style="text-align: center;">
          <p>username：{{ row.param.username }}</p>
          <p>password：{{ row.param.password }}</p>
          <p v-if="row.param.app_key">app_key：{{ row.param.app_key }}</p>
        </div>
        <div v-else>
          <p>app_key：{{ row.param.app_key }}</p>
          <p>app_secret：{{ row.param.app_secret }}</p>
          <p v-if="row.param.uid">uid：{{ row.param.uid }}</p>
        </div>
      </template>
        <template slot-scope="{ row }" slot="operation" class="operation">
            <Button type="primary" size="small" class="operation__btn" @click="editConfig(row)">{{$t('edit')}}</Button>
            <Button type="error" size="small" class="operation__btn" @click="remove(row)">{{$t('delete')}}</Button>
        </template>
    </Table>
    <!-- 获取token -->
    <Modal v-model="acToken">
      <p slot="header" style="font-size:16px;text-align:center">
          <span> {{ $t('config_1') }} </span>
      </p>
      <div style="display: flex;flex-wrap: wrap;justify-content: center;">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="140" style="margin-top: 30px;width:100%">
          <FormItem :label="$t('config_name')" class="formItemStyle" prop="asTokenName" :label-width="110">
            <div class="formItemStyle__box">
              <span class="star" style="left: -80px;">*</span>
              <div style="display: flex;">
                <Input disabled v-model="formValidate.asTokenName">
                </Input>
              </div>
            </div>
          </FormItem>
          <FormItem :label="$t('config_2')" class="formItemStyle" id="formItemStyleWay" :label-width="110">
            <div class="formItemStyle__box" style="margin-right:50px">
              <div style="position:relative">
                <Select v-model="formValidate.asApiToken" @on-change="changeConfig">
                  <Option v-for="item in asApiTokenList" :value="item.value" :key="item.title">{{ item.label }}</Option>
                </Select>
              <a target="_blank" style="position: absolute;width: 50px;" :href="formValidate.asApiToken === 'App.Auth.ApplyToken' ?  '/docs.php?service=App.Auth.ApplyToken&detail=1&type=fold' :' /docs.php?service=App.Auth.UserLogin&detail=1&type=fold'">{{ $t('api_doc') }}</a>
              </div>
            </div>
          </FormItem>
          <!-- App.Auth.ApplyToken -->
          <div v-if="acTokenApplyToken" style="width:100%">
            <FormItem label="app_key：" class="formItemStyle" prop="app_keyy" :label-width="110">
              <div class="formItemStyle__box">
                <span class="star" style="left: -80px;top:3px;">*</span>
                <div>
                  <Input clearable v-model="formValidate.app_key"></Input>
                </div>
              </div>
            </FormItem>
            <FormItem label="app_secret：" class="formItemStyle" prop="app_secret" :label-width="110">
              <div class="formItemStyle__box">
                <span class="star" style="left: -90px;top:3px;">*</span>
                <div style="margin-left: -10px;">
                  <Input clearable v-model="formValidate.app_secret"></Input>
                </div>
              </div>
            </FormItem>
            <FormItem label="uid：" class="formItemStyle" :label-width="110">
              <div class="formItemStyle__box">
                <div>
                  <Input clearable v-model="formValidate.uid"></Input>
                </div>
              </div>
            </FormItem>
          </div>
          <!-- App.Auth.UserLogin -->
          <div v-else style="width:100%">
            <FormItem label="username：" class="formItemStyle" prop="username" :label-width="110">
              <div class="formItemStyle__box">
                <span class="star" style="left: -84px;top:3px;">*</span>
                <div>
                  <Input clearable v-model="formValidate.username"></Input>
                </div>
              </div>
            </FormItem>
            <FormItem label="password：" class="formItemStyle" prop="password" :label-width="110">
              <div class="formItemStyle__box">
                <span class="star" style="left: -82px;top:3px;">*</span>
                <div>
                  <Input clearable v-model="formValidate.password"></Input>
                </div>
              </div>
            </FormItem>
            <FormItem label="app_key：" class="formItemStyle" :label-width="110">
              <div class="formItemStyle__box">
                <span class="star" style="left: -82px;top:3px;">*</span>
                <div>
                  <Input clearable v-model="formValidate.ulapp_key"></Input>
                </div>
              </div>
            </FormItem>
          </div>
        </Form>
      </div>
      <div slot="footer" style="display: flex;justify-content: center;align-items: center;">
          <Button type="warning" @click="editConfigFun"> {{ $t('config_3') }} </Button>
      </div>
    </Modal>
    <!-- 禁止删除 -->
    <Modal v-model="noRemove" width="400">
        <p slot="header" style="color:red;text-align:center">
            <!-- <Icon type="ios-information-circle"></Icon> -->
            <span> {{ $t('config_4') }} </span>
        </p>
        <div style="text-align:center">
            <p>{{ $t('config_5') }}{{ num }}{{ $t('config_6') }}</p>
            <p>{{ $t('config_7') }}</p>
        </div>
        <div slot="footer" style="display:flex;justify-content: center;">
            <Button type="primary" @click="noRemoveFun">{{ $t('config_8') }}</Button>
        </div>
    </Modal>
    <div class="pagination">
      <Page :total="total" show-elevator show-sizer @on-page-size-change='changeSize' @on-change='changePage'/>
    </div>
  </div>
</template>

<script>
import { GetAtConfigList, RemoveAtConfig, EditAtConfig } from '@/api/techzones.js'
import { getToken } from '@/libs/util'
export default {
  name: 'directive_page',
  data () {
    return {
      token: getToken(),
      total: 0,
      page: 1, // 分页
      perpage: 10,
      listLoad: false,
      acToken: false,
      noRemove: false,
      num: 0,
      columnsList: [
        {
          title: this.$t('index'),
          key: 'id',
          align: 'center',
          width: '100'
        },
        {
          title: this.$t('config_name'),
          key: 'title',
          slot: 'title',
          align: 'center',
          width: '200'
        },
        {
          title: this.$t('config_2'),
          key: 'type',
          align: 'center',
          width: '150'
        },
        {
          title: this.$t('config_9'),
          key: 'param',
          slot: 'param',
          align: 'center'
        },
        {
          title: this.$t('config_10'),
          key: 'num',
          align: 'center',
          width: '150'
        },
        {
          title: this.$t('operation'),
          slot: 'operation',
          width: 180,
          align: 'center'
        }
      ],
      asApiTokenList: [
        {
          value: 'App.Auth.ApplyToken',
          label: 'App.Auth.ApplyToken'
        },
        {
          value: 'App.Auth.UserLogin',
          label: 'App.Auth.UserLogin'
        }
      ],
      acTokenApplyToken: false,
      configData: {},
      formValidate: {
        asTokenName: '',
        asApiToken: '',
        app_key: '',
        app_secret: '',
        uid: '',
        username: '',
        password: '',
        ulapp_key: ''
      }, // 规则变量
      ruleValidate: {
        /* acToken: [
          { required: true, message: 'access token 配置不能为空，请重新填写' }
        ] */
        /* asTokenName: [
          { required: true, message: '配置名称不能为空，请重新填写', trigger: 'blur' }
        ] */
        /* app_keyy: [
          { required: true, message: 'app_key不能为空，请重新填写', trigger: 'blur' }
        ],
        app_secret: [
          { required: true, message: 'app_secret不能为空，请重新填写', trigger: 'blur' }
        ],
        username: [
          { required: true, message: 'username不能为空，请重新填写', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'password不能为空，请重新填写', trigger: 'blur' }
        ] */
      }, // 验证规则
      dataList: []
    }
  },
  // 获取应用管理数据
  created () {
    this.queryList()
  },
  methods: {
    /* config改变 */
    changeConfig (data) {
      // this.configName = data
      // console.log(data)
      this.configData.type = data
      if (data === 'App.Auth.UserLogin') {
        this.acTokenApplyToken = false
      } else {
        this.acTokenApplyToken = true
      }
    },
    // 查询列表
    queryList () {
      this.listLoad = true
      const dataObj = new FormData()
      dataObj.append('access_token', this.token)
      dataObj.append('page', this.page)
      dataObj.append('perpage', this.perpage)
      GetAtConfigList(dataObj).then(res => {
        this.total = res.data.total
        this.dataList = res.data.items
        this.listLoad = false
      })
    },
    changeSize (size) {
      this.perpage = size
      this.queryList()
    },
    changePage (page) {
      this.page = page
      this.queryList()
    },
    /* 获取当个配置弹窗 */
    editConfig (data) {
      this.configData = data
      // console.log(this.configData, '111111')
      this.acToken = true
      this.formValidate.asTokenName = data.title
      if (this.configData.type === 'App.Auth.UserLogin') {
        this.acTokenApplyToken = false
        this.formValidate.asApiToken = data.type
        this.formValidate.username = data.param.username + ''
        this.formValidate.password = data.param.password + ''
        if (data.param.app_key) {
          this.formValidate.ulapp_key = data.param.app_key + ''
        }
      } else {
        this.acTokenApplyToken = true
        this.formValidate.asApiToken = data.type
        this.formValidate.app_key = data.param.app_key + ''
        this.formValidate.app_secret = data.param.app_secret + ''
        if (data.param.uid) {
          this.formValidate.ulapp_key = data.param.uid + ''
        }
      }
    },
    /* 修改全局配置Fun */
    editConfigFun () {
      this.formValidate.asTokenName = this.configData.title
      if (this.configData.type === 'App.Auth.UserLogin') {
        const dataObj = new FormData()
        dataObj.append('access_token', this.token)
        dataObj.append('id', this.configData.id)
        dataObj.append('title', this.formValidate.asTokenName)
        dataObj.append('type', '1')
        const obj = {}
        if (this.formValidate.username) {
          obj.username = this.formValidate.username
        } else {
          this.$Message.warning(this.$t('config_11'))
          return
        }
        if (this.formValidate.password) {
          obj.password = this.formValidate.password
        } else {
          this.$Message.warning(this.$t('config_12'))
          return
        }
        if (this.formValidate.ulapp_key) {
          obj.app_key = this.formValidate.ulapp_key
        } else {
          this.$Message.warning(this.$t('config_13'))
          return
        }
        dataObj.append('param', JSON.stringify(obj))
        EditAtConfig(dataObj).then(res => {
          if (res.ret === 200 && res.data.isUpdate) {
            this.acToken = false
            this.$Message.success(res.data.msg)
            this.queryList()
          } else {
            if (res.msg) {
              this.$Message.warning(res.msg)
            } else {
              this.$Message.warning(this.$t('config_14'))
            }
          }
        })
      } else {
        const dataObj = new FormData()
        dataObj.append('access_token', this.token)
        dataObj.append('id', this.configData.id)
        dataObj.append('title', this.formValidate.asTokenName)
        dataObj.append('type', '2')
        const obj = {}
        if (this.formValidate.app_key) {
          obj.app_key = this.formValidate.app_key
        } else {
          this.$Message.warning(this.$t('config_13'))
          return
        }
        if (this.formValidate.app_secret) {
          obj.app_secret = this.formValidate.app_secret
        } else {
          this.$Message.warning(this.$t('config_15'))
          return
        }
        if (this.formValidate.uid) {
          obj.uid = this.formValidate.uid
        }
        dataObj.append('param', JSON.stringify(obj))
        EditAtConfig(dataObj).then(res => {
          if (res.ret === 200 && res.data.isUpdate) {
            this.acToken = false
            this.$Message.success(res.data.msg)
            this.queryList()
          } else {
            if (res.msg) {
              this.$Message.warning(res.msg)
            } else {
              this.$Message.warning(this.$t('config_16'))
            }
          }
        })
      }
    },
    /* 删除全局配置 */
    remove (row) {
      if (row.num === 0) {
        this.$Modal.confirm({
          title: this.$t('design_50'),
          content: '<p>'+ this.$t('config_17')+  '</p>',
          onOk: () => {
            const formdata = new FormData()
            formdata.append('access_token', this.token)
            formdata.append('id', row.id)
            RemoveAtConfig(formdata).then(res => {
              if (res.ret === 200 && res.data.isDel) {
                this.$Message.success(this.$t('successfully_delete'))
                this.queryList()
              }
            })
          },
          onCancel: () => {
            this.$Message.info(this.$t('design_53'))
          }
        })
      } else {
        this.num = row.num
        this.noRemove = true
      }
    },
    noRemoveFun () {
      this.noRemove = false
    }
  }
}
</script>

<style lang="scss" scoped>
.taskConfig{
  &__h{
    height:72px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 30px 0px rgba(0,0,0,0.05);
    border-radius:10px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &--p{
      font-size:16px;
      font-family:PingFangSC-Medium,PingFang SC;
      font-weight:500;
      margin-left: 30px;
      color:rgba(35,35,42,1);
    }
  }
  &__tab{
    background: #fff;
    border-radius: 10px;
  }
  &__input{
    margin-right:40px;
  }
}
.ListTab{
  background: #fff;
  border-radius: 10px;
}
.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
.formItemStyle {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /deep/ .ivu-form-item-content{
    width: 100%!important;
  }
  &__box{
    margin-left: -110px;
    position: relative;
  }
}
#formItemStyleWay{
  .ivu-form-item-label{
    width: 200px!important;
  }
}
.star{
  position: absolute;
  color:red;
}
.operation{
  &__btn{
    margin: 0 5px;
  }
}
/deep/ .ivu-form .ivu-form-item-label{
  text-align: left!important;
  white-space: nowrap;
}
</style>
