<!--
  @description: 配置管理-新增
  @author: 肖文龙
  @routerPath:
  @date:  2020/6/08
-->
<template>
  <div>
    <el-dialog
      :title="dialogData.dialog"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="650px"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="120px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="图片1" al prop="imgRegist">
          <upload
            ref="upload"
            :title="``"
            :data="upLoadDataOne"
            :file-list="fileListOne"
            :auto-upload="true"
            :limit="1"
            :action="importFileUrl"
            :auto-delete="true"
            :success="successOne"
            :accept="accept"
            :before-upload="beforeUpload"
            file-ref="fileRefOne"
          />
        </el-form-item>
        <el-form-item label="网站图标" prop="icoFavicon">
          <upload
            ref="upload"
            :title="``"
            :data="upLoadDataTwo"
            :file-list="fileListTwo"
            :auto-upload="true"
            :limit="1"
            :action="importFileUrl"
            :auto-delete="true"
            :success="successTwo"
            :accept="accepticon"
            :before-upload="beforeUpload"
            file-ref="fileRefTwo"
          />
        </el-form-item>
        <el-form-item label="LOGO" prop="imgMajor">
          <upload
            ref="upload"
            :title="``"
            :data="upLoadDataThree"
            :file-list="fileListThree"
            :auto-upload="true"
            :limit="1"
            :action="importFileUrl"
            :auto-delete="true"
            :success="successThree"
            :accept="accept"
            :before-upload="beforeUpload"
            file-ref="fileRefThree"
          />
        </el-form-item>
        <el-form-item label="平台名称" prop="platform">
          <el-input v-model="temp.platform" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="网页标题" prop="title">
          <el-input v-model="temp.title" :disabled="disabled" />
        </el-form-item>
        <el-form-item label="是否有效" prop="useStatus">
          <el-radio-group v-model="temp.useStatus" :disabled="disabled">
            <el-radio label="01">
              是
            </el-radio>
            <el-radio label="02">
              否
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div v-if="!disabled" slot="footer" class="dialog-footer">
        <el-button v-if="dialogStatus == 'create'" type="primary" @click="createData('dataForm')">
          确定
        </el-button>
        <el-button v-else type="primary" @click="updateData('dataForm')">
          确定
        </el-button>
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import upload from '@comp/common/updownload/upload'
import { randomData } from '@/assets/js/utils/index'
import { ListMixin } from '@/mixins/ListMixin'
import { addPlatformConfig, selectPlatformConfig } from '@/api/rolemanagment/platformConfig'
export default {
  name: 'PlatformConfigAdd',
  components: {
    upload
  },
  mixins: [ListMixin],
  data() {
    return {
      accept: '',
      accepticon: '.ico', // 网页图标
      tableData: [],
      rules: {
        // 校验
        imgRegist: [{ required: true, message: '不能为空', trigger: 'blur' }],
        icoFavicon: [{ required: true, message: '不能为空', trigger: 'blur' }],
        imgMajor: [{ required: true, message: '不能为空', trigger: 'blur' }],
        platform: [{ required: true, message: '不能为空', trigger: 'blur' }],
        useStatus: [{ required: true, message: '不能为空', trigger: 'change' }],
        title: [{ required: true, message: '不能为空', trigger: 'blur' }]
      },
      fromData: {
        // 传的参数
        id: '',
        imgRegist: '', // 图片1
        icoFavicon: '', // 图片2
        imgMajor: '', // 图片3
        platform: '', // 平台名称
        useStatus: '01', // 01正式; 02作废
        title: ''// 网页标题
      }
    }
  },
  mounted() {
  },
  methods: {
    // 查询数据
    getData(id) {
      selectPlatformConfig(id).then(res => {
        if (res.header.ret === '0') {
          this.fromData = res.data
          this.upLoadDataOne.bizId = this.fromData.id
          this.upLoadDataTwo.bizId = this.fromData.id
          this.upLoadDataThree.bizId = this.fromData.id
        }
      })
    },
    // 添加配置
    initData() {
      // 前端生成主键ID
      this.fromData.id = randomData()
      this.upLoadDataOne.bizId = this.fromData.id
      this.upLoadDataTwo.bizId = this.fromData.id
      this.upLoadDataThree.bizId = this.fromData.id
    },
    // 保存数据
    saveData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addPlatformConfig(this.temp).then(res => {
            if (res.header.ret === '0') {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.dialogFormVisible = false
              this.getData()
            }
          }).catch({})
        }
      })
    }
  }
}
</script>

<style scoped  lang="less">
.segmentation {
  margin-bottom: 24px;
}

.inputInvoice {
  padding: 0 16px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  border: 1px solid rgba(220, 223, 230, 1);
  color: #606266;
}
.img_pic {
  max-height: 50px;
}
</style>
