<template>
  <el-dialog :visible.sync="visible"
             :title="'修改定制功能'"
             :close-on-click-modal="false"
             :before-close="handleClose"
             :close-on-press-escape="false"
             :width="60+'%'"
             :top="'20px'">
    <el-form :inline="true"
             :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             :label-width="'120px'">
      <el-form-item label="功能名称"
                    prop="functionName">
        <el-tooltip class="item"
                    effect="dark"
                    content="请输入2-5个字"
                    placement="top-start">
          <el-input class="item_width_1"
                    oninput="if(value.length>5)value=value.slice(0,5)"
                    v-model="dataForm.functionName"
                    placeholder="功能名称"></el-input>
        </el-tooltip>

        <div slot="tip"
             class="el-upload__tip">2-5个字</div>
      </el-form-item>
      <el-form-item label="来源"
                    prop="fromApp">
        <el-select :disabled="isApply===1"
                   class="item_width_1"
                   v-model="dataForm.fromApp"
                   placeholder="请选择"
                   clearable>
          <el-option v-for="item in fromAppList"
                     :key="item.dictValue"
                     :label="item.dictName"
                     :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上架状态"
                    prop="shoppingStatus">
        <el-select class="item_width_1"
                   :disabled="isApply===1"
                   v-model="dataForm.shoppingStatus"
                   placeholder="请选择"
                   clearable>
          <el-option v-for="item in shoppingStatusList"
                     :key="item.dictValue"
                     :label="item.dictName"
                     :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="外链地址"
                    prop="targetLink">
        <el-input class="item_width_1"
                  :disabled="isApply===1"
                  v-model="dataForm.targetLink"
                  placeholder="外链地址"></el-input>
      </el-form-item>

      <el-form-item prop="iconLargeImg"
                    label="大图标">
        <el-upload class="item_width_1 avatar-uploader"
                   :action="uploadUlr"
                   :show-file-list="false"
                   :on-success="function (res, file) { return handleImgSuccess(res, file, 'large')}"
                   :before-upload="beforeImgUpload">
          <img v-if="dataForm.iconLargeImg"
               :src="dataForm.iconLargeImg"
               style="width:70px;height:70px"
               class="function-icon">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item prop="iconSmallImg"
                    label="小图标">
        <el-upload class="item_width_1 avatar-uploader"
                   :action="uploadUlr"
                   :show-file-list="false"
                   :on-success="function (res, file) { return handleImgSuccess(res, file, 'small')}"
                   :before-upload="beforeImgUpload">
          <img v-if="dataForm.iconSmallImg"
               :src="dataForm.iconSmallImg"
               style="width:50px;height:50px"
               class="function-icon">
          <i v-else
             class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item prop="domainName"
                    class="block"
                    label="业务域名">
        <div v-for="(item, index)  in domainNameList"
             :key="index">
          <el-input :disabled="isApply===1"
                    style="width:300px;display:block;margin-bottom:10px; float:left"
                    placeholder='请输入业务域名'
                    v-model="domainNameList[index]"> </el-input>

          <el-button v-if="index===0&&isApply===0"
                     size="mini"
                     class="btn_serve"
                     type="primary"
                     icon="el-icon-plus"
                     @click="addRequest()"
                     circle></el-button>
          <el-button v-if="index!==0&&isApply===0"
                     size="mini"
                     type="danger"
                     class="btn_serve"
                     icon="el-icon-minus"
                     @click="delRequest(index)"
                     circle></el-button>

        </div>

      </el-form-item>

      <el-form-item class="block"
                    label="功能说明"
                    prop="functionExplain">
        <el-input class="item_width_2"
                  v-model="dataForm.functionExplain"
                  placeholder="功能说明"
                  type="textarea"></el-input>
      </el-form-item>

    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary"
                 @click="saveForm()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { Loading } from 'element-ui' // 引入Loading服务

let loading// 加载动画
export default {
  data () {
    return {
      visible: false,
      type: '', // 操作类型A/U
      functionId: '', // 父组件传来功能id
      dataForm: {
        functionId: '',
        functionName: '',
        customizedName: '',
        iconLargeImg: '',
        iconSmallImg: '',
        shoppingStatus: 1,
        functionExplain: '',
        targetLink: '',
        domainName: '',
        fromApp: 'resi'
      },
      domainNameList: [],
      isApply: 0,//客户是否在用
      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/function/upload',
      fromAppList: [
        {
          'dictName': '工作端',
          'dictValue': 'gov'
        }, {
          'dictName': '居民端',
          'dictValue': 'resi'
        }
      ],
      shoppingStatusList: [
        {
          'dictName': '下架',
          'dictValue': '0'
        }, {
          'dictName': '上架',
          'dictValue': '1'
        }
      ]
    }
  },
  created () {
    // this.queryFunctionList()
  },
  computed: {
    dataRule () {
      return {
        functionName: [
          { required: true, message: '功能名称不能为空', trigger: 'blur' }
        ],
        domainName: [
          { required: true, message: '业务域名不能为空', trigger: 'blur' }
        ],
        iconLargeImg: [
          { required: true, message: '大图标不能为空', trigger: 'blur' }
        ],
        iconSmallImg: [
          { required: true, message: '小图标不能为空', trigger: 'blur' }
        ],
        fromApp: [
          { required: true, message: '来源不能为空', trigger: 'blur' }
        ],
        shoppingStatus: [
          { required: true, message: '上架状态不能为空', trigger: 'blur' }
        ],
        functionExplain: [
          { required: true, message: '功能描述不能为空', trigger: 'blur' }
        ],
        targetLink: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init (functionId, type) {
      this.type = type
      this.visible = true
      this.functionId = functionId
      if (type === 'A') {
        this.dataForm = {
          functionId: '',
          functionName: '',
          customizedName: '',
          iconLargeImg: '',
          iconSmallImg: '',
          shoppingStatus: '1',
          functionExplain: '',
          targetLink: '',
          domainName: '',
          fromApp: 'resi'
        }
        this.domainNameList = ['']
        this.isApply = 0
      } else {
        this.loadFormData()
      }
    },
    addRequest () {
      // eslint-disable-next-line
      // debugger
      this.domainNameList.push('')
    },
    delRequest (index) {
      this.domainNameList.splice(index, 1)
    },

    loadFormData () {
      // const url='https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/functioncustomized/getfunctioncustomized'
      const url = '/oper/customize/functioncustomized/getfunctioncustomized'
      let _data = {
        functionId: this.functionId
      }
      window.app.ajax.post(url, _data,
        (data, rspMsg) => {
          this.dataForm = data
          // this.dataForm.domainNameList = this.dataForm.domainName.split(';')
          this.domainNameList = this.dataForm.domainName.split(';')
          this.isApply = data.isApply
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        })
    },

    // 上传大图标成功
    handleImgSuccess (res, file, type) {
      if (res.code === 0 && res.msg === 'success') {
        if (type === 'large') {
          this.dataForm.iconLargeImg = res.data.url
        } else if (type === 'small') {
          this.dataForm.iconSmallImg = res.data.url
        }
      } else {
        this.$message.error(res.msg)
      }
    },

    beforeImgUpload (file) {
      // const isPNG = file.type === 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 1

      // if (!isPNG) {
      //   this.$message.error('上传图片只能是 PNG 格式!')
      // }
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }
      // return isPNG && isLt1M
      return isLt1M
    },

    saveForm () {
      this.$refs['dataForm'].validate((valid, messageObj) => {

        if (!valid) {
          let message = ''
          for (var oneObj in messageObj) {
            // debugger
            // console.log(messageObj[oneObj])
            message = message + (messageObj[oneObj])[0].message + ' \n '
          }
          // message = message.substring(0, message.length - 1)
          this.$message.error(message)
        } else {
          if (this.dataForm.functionName.length > 5) {
            this.$message.warning('功能名称长度不能大于5个字!')
            return false
          } else if (this.dataForm.functionName.length < 2) {
            this.$message.warning('功能名称长度不能小于2个字!')
            return false
          }
          // eslint-disable-next-line
          // debugger
          let domainName = ''
          for (let i = 0; i < this.domainNameList.length; i++) {
            if (this.domainNameList[i] !== '') {
              domainName = domainName + this.domainNameList[i] + ';'
            }
          }
          domainName = domainName.substring(0, domainName.length - 1)
          this.dataForm.domainName = domainName

          let url = ''
          if (this.type === 'U') {
            url = '/oper/customize/functioncustomized/updatecustomized'
          } else {
            url = '/oper/customize/functioncustomized/savefunctioncustomized'
            this.dataForm.functionId = ''
          }
          this.dataForm.functionGroup = '1'
          window.app.ajax.post(url, this.dataForm,
            (data, rspMsg) => {
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.$emit('editDiaOK')
              this.visible = false
            },
            (rspMsg, data) => {
              this.endLoading()
              this.$message.error(rspMsg)
            })
        }
      })
    },
    handleClose () {
      this.visible = false
    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }

  }
}
</script>

<style scoped>
.function-icon {
  width: 28px;
}
.item_width_1 {
  width: 300px;
}
.item_width_2 {
  width: 500px;
}
.block {
  display: block;
}
.btn_serve {
  float: left;
  margin-top: 4px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
