<template>
  <el-dialog :visible.sync="visible"
             :title="'修改定制功能'"
             :close-on-click-modal="false"
             :before-close="handleClose"
             :close-on-press-escape="false">
    <el-form :inline="true"
             :model="dataForm"
             :rules="dataRule"
             ref="dataForm"
             :label-width="'120px'">
      <el-form-item label="功能名称"
                    prop="functionName">
        <el-input class="item_width_1"
                  v-model="dataForm.functionName"
                  placeholder="功能名称"></el-input>
      </el-form-item>
      <el-form-item label="来源"
                    prop="fromApp">
        <el-select 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"
                   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"
                  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: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 class="block"
                    label="业务域名">
        <div v-for="(item, index)  in dataForm.domainNameList"
             :key="index">
          <el-input style="width:300px;display:block;margin-bottom:10px; float:left"
                    placeholder='请输入uploadFile 合法域名'
                    v-model="dataForm.domainNameList[index]"> </el-input>

          <el-button v-if="index===0"
                     size="mini"
                     class="btn_serve"
                     type="primary"
                     icon="el-icon-plus"
                     @click="addRequest()"
                     circle></el-button>
          <el-button v-else
                     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="domainName">
        <el-input class="item_width_2"
                  v-model="dataForm.domainName"
                  placeholder="业务域名"
                  type="textarea"></el-input>
      </el-form-item>
      <div slot="tip"
           class="el-upload__tip">可写多个，用;分隔</div> -->
      <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
      dataForm: {
        functionId: '',
        functionName: '',
        customizedName: '',
        iconLargeImg: '',
        iconSmallImg: '',
        shoppingStatus: 1,
        functionExplain: '',
        targetLink: '',
        domainName: '',
        domainNameList: [],
        fromApp: 'resi'
      },
      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: this.$t('validate.required'), trigger: 'blur' }
        ],
        iconLargeImg: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        iconSmallImg: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        fromApp: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        shoppingStatus: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        functionExplain: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        targetLink: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init (dataForm, type) {
      this.type = type
      this.visible = true
      // this.dataForm=dataForm

      this.$nextTick(() => {
        dataForm.functionName = dataForm.customizedName
        if (dataForm.domainName === '') {
          dataForm.domainNameList.push('')
        } else {
          dataForm.domainNameList = dataForm.domainName.split(';')
        }
        Object.assign(this.dataForm, dataForm)
      })
    },
    addRequest () {
      this.dataForm.domainNameList.push('')
    },
    delRequest (index) {
      this.dataForm.domainNameList.splice(index, 1)
    },

    // 上传大图标成功
    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) => {
        if (!valid) {
          this.$message.error('表单验证失败!')
        } 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.dataForm.domainNameList.length; i++) {
            if (this.dataForm.domainNameList[i] !== '') {
              domainName = domainName + this.dataForm.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: 700px;
}
.block {
  display: block;
}
.btn_serve {
  float: left;
  margin-top: 4px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
