<template>
  <div class="add-ribbon-page">
    <Card v-if="loading" class="loading-card">
      <Spin fix size="large" />
    </Card>
    <Card v-else>
      <div class="head">
        <Icon type="md-bookmark" color="#2d8cf0" :size="28" />
        <label>{{ title }}</label>
      </div>
      <div class="item">
        <label class="label">名称：</label>
        <Input
          placeholder="请填写名称"
          v-model="form.functionName"
          :maxlength="30"
          :readonly="isEdit"
          clearable
          style="width: 400px"
        />
      </div>
      <div class="item">
        <label class="label">图标：</label>
        <div class="upload-con">
          <file-upload
            :width="150"
            :iconSize="26"
            :maxNum="1"
            v-model="form.functionImage"
            showWatch
          />
        </div>
      </div>
      <div class="item">
        <label class="label">详情链接：</label>
        <Input
          placeholder="请填写详情链接"
          v-model="form.url"
          :maxlength="100"
          clearable
          style="width: 400px"
        />
      </div>
      <div class="item">
        <label class="label">链接参数：</label>
        <div class="link-con">
          <div
          class="link-item"
          v-for="(item, index) of form.param"
          :key="'prop-item-' + index"
        >
          <Input
            class="prop-name"
            placeholder=""
            v-model="item.name"
            :maxlength="400"
          />
          <label class="split">:</label>
          <Input
            class="prop-val"
            placeholder=""
            v-model="item.val"
            :maxlength="400"
          />
          <Icon
            class="del-con"
            type="md-close-circle"
            color="#ed4014"
            :size="20"
            @click="delProp(index)"
          />
        </div>
        <div class="add-btn">
          <Button
            type="info"
            shape="circle"
            size="small"
            @click="addProp"
            >+ 添加链接参数(非必填)</Button
          >
        </div>
        </div>

      </div>
      <div class="item">
        <label class="label">显示顺序：</label>
        <!--        <InputNumber  :min="1" v-model="form.displayOrder"></InputNumber>-->
        <Input v-model="form.displayOrder"  type="number" style="width: 200px;"/>
      </div>
      <div class="footer-con">
        <Button
          type="default"
          @click="handleCancel"
          style="margin-right: 30px"
        >取消</Button
        >
        <Button
          type="primary"
          @click="handleSubmit"
          :loading="submitLoading"
        >确定</Button
        >
      </div>
    </Card>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import FileUpload from '_c/file-upload'
export default {
  name: 'add-ribbon',
  components: {
    FileUpload
  },
  computed: {
    title () {
      if (this.routeName === 'update_ribbon') {
        return '编辑功能区 - 填写下列信息'
      } else {
        return '新增功能区 - 填写下列信息'
      }
    },
    isEdit () {
      return this.routeName === 'update_ribbon'
    },
    isAdd () {
      return this.routeName === 'add_ribbon'
    }
  },
  data () {
    return {
      routeName: '',
      form: {
        operationFunctionId: '',
        updateTime: '',
        functionName: '',
        functionImage: [],
        url: '',
        displayOrder: '',
        param: []
      },
      loading: false,
      submitLoading: false
    }
  },
  methods: {
    ...mapMutations(['closeTag']),
    addProp () {
      this.form.param.push({ name: '', val: '' })
    },
    delProp (index) {
      this.form.param.splice(index, 1)
    },
    handleCancel () {
      let route = this.$route
      let toRouteName = 'ribbon_management'
      this.closeTag({ route, toRouteName })
    },
    handleSubmit () {
      let { errMsg, form } = this.checkForm()
      if (errMsg) {
        return this.$Notice.warning({ title: errMsg })
      }
      form.param = form.param ? JSON.stringify(form.param) : []
      let apiName = this.isAdd ? 'addRibbon' : 'updateRibbon'
      let title = this.isAdd ? '添加成功！' : '编辑成功！'
      this.submitLoading = true
      this.api({
        apiName,
        postdata: form,
        success: (res) => {
          // 关闭当前标签页
          let route = this.$route
          let toRouteName = 'ribbon_management'
          this.closeTag({ route, toRouteName })
          this.$Notice.success({ title })
        },
        complete: () => {
          this.submitLoading = false
        }
      })
    },
    checkForm () {
      let { operationFunctionId, updateTime, functionName, functionImage, url, displayOrder, param } = this.form
      let form = {
        operationFunctionId,
        functionName,
        functionImage,
        displayOrder,
        url,
        updateTime,
        param
      }
      form.functionImage = functionImage.join()
      let errMsg = ''
      if (!functionName) {
        return { errMsg: '请填写名称！' }
      }
      if (functionImage.length == 0) {
        return { errMsg: '请选择图标！' }
      }
      if (!url) {
        return { errMsg: '请输入详情链接' }
      }
      // if (!/(http|https):\/\/([\w.]+\/?)\S*/.test(url)) {
      //   return { errMsg: '链接格式有误(以http或者htpps://开头)！' }
      // }

      if (!displayOrder) {
        return { errMsg: '请输入显示顺序！' }
      }
      if (displayOrder <= 0 || !/^\d+$/.test(displayOrder)) {
        return { errMsg: '显示顺序输入格式有误！' }
      }

      return { errMsg, form }
    },
    requestRibbonDetail (operationFunctionId) {
      this.api({
        apiName: 'ribbonDetail',
        postdata: operationFunctionId,
        success: (res) => {
          console.log(res)
          let { functionName, functionImage, displayOrder, url, operationFunctionId, updateTime, param } = res.data
          this.form.functionName = functionName
          this.form.functionImage = [functionImage]
          this.form.displayOrder = displayOrder
          this.form.url = url
          this.form.operationFunctionId = operationFunctionId
          this.form.updateTime = updateTime
          this.form.param = param ? JSON.parse(param) : []
        }
      })
    },
    initData () {
      let routeName = this.$route.name
      console.log(routeName)
      let { operationFunctionId } = this.$route.query
      this.form.operationFunctionId = operationFunctionId
      this.routeName = routeName
      if (routeName == 'update_ribbon') {
        this.requestRibbonDetail(operationFunctionId)
      } else {
        this.loading = false
      }
    }
  },
  mounted () {
    this.initData()
  }
}
</script>

<style scoped lang="less">
  .add-ribbon-page {
    height: 100%;
  .loading-card {
    height: 100%;
  }
  .head {
    color: #17233d;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  i {
    margin-right: 10px;
  }
  }
  .item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .item .label {
    display: block;
    width: 150px;
    text-align: right;
  }
  .item .link-con {
    width:600px;
    // flex: 1;
    padding: 20px;
    border: 1px solid #dcdee2;
    border-radius: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .item .link-con .add-btn {
    width: 100%;
  }
  .item .link-item {
    width: 50%;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-right: 30px;
    .prop-name {
      flex: 1;
    }
    .prop-val {
      flex: 2;
    }
    .split {
      margin: 0 5px;
      font-weight: bold;
    }
    .del-con {
      margin-left: 5px;
      cursor: pointer;
    }
  }
  .footer-con {
    display: flex;
    padding: 30px 120px;
  }
  }
</style>
