<!--
  @description: 配置管理列表
  @author: change by sunxinman
  @routerPath: /systemManagement/platformConfig-list
  @date:  2019/12/02-23:33
-->
<template>
  <div>
    <!--标题-->
    <div class="title title_border p0-16">
      <i class="el-icon-s-home" />配置管理
    </div>
    <section class="p0-16">
      <div class="mb10 mt10">
        <el-button type="primary" plain @click="addConfig">
          新增配置
        </el-button>
      </div>
      <section>
        <el-table
          ref="smallTable"
          :data="tableData"
        >
          <el-table-column type="index" label="序号" align="center" width="60" />
          <!--        <el-table-column prop="imgRegist" align="center" label="logo">
            <template slot-scope="scope">
              <img :src="scope.row.imgRegist" alt class="img_pic" >
            </template>
          </el-table-column>-->
          <el-table-column prop="icoFavicon" align="center" width="80" label="网站图标">
            <template slot-scope="scope">
              <img :src="scope.row.icoFavicon" alt class="img_pic">
            </template>
          </el-table-column>
          <el-table-column prop="imgMajor" label="logo">
            <template slot-scope="scope">
              <img :src="scope.row.imgMajor" alt class="img_pic">
            </template>
          </el-table-column>
          <el-table-column prop="platform" label="平台名称" />
          <el-table-column prop="title" label="网页标题" />
          <el-table-column prop="useStatus" label="是否有效" width="80" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.useStatus==='00'">临时</span>
              <span v-if="scope.row.useStatus==='01'">正式</span>
              <span v-if="scope.row.useStatus==='02'">作废</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="160px" fixed="right">
            <template slot-scope="scope">
              <el-link type="primary" @click.stop="editBtn(scope.row.id)">
                [编辑]
              </el-link>
              <el-link type="primary" @click.stop="lookBtn(scope.row.id)">
                [查看]
              </el-link>
              <el-link type="primary" @click.stop="delBtn(scope.row.id)">
                [删除]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="pagination p16">
          <div class="page-number fl">
            共{{ Math.ceil(totalPage/pageSize) }}页 {{ totalPage }}条
          </div>
          <el-pagination
            :current-page="pageNo"
            :page-size="pageSize"
            :total="totalPage"
            layout="prev, pager, next, sizes"
            class="fr"
            background
            @current-change="pickHandle"
            @size-change="handleSizeChange"
          />
        </el-row>
      </section>
    </section>
    <el-dialog
      :title="textMap[dialogStatus]"
      :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="网站图标" 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"
            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"
            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 { upLoadFileUrl, getFileDetail, downLoadFileUrl, readImageRoot } from '@/api/common/uploadCenter'
import { randomData } from '@/assets/js/utils/index'
import { ListMixin } from '@/mixins/ListMixin'
import { getPlatformConfigList, addPlatformConfig, selectPlatformConfig, updatePlatformConfig, deletePlatformConfig } from '@/api/rolemanagment/platformConfig'
export default {
  name: 'PlatformConfigList',
  components: {
    upload
  },
  mixins: [ListMixin],
  data() {
    return {
      accept: '.jpg,.jpeg,.png,.JPG,.JPEG,.PNG',
      accepticon: '.ico',
      disabled: false, // 控制输入框的状态
      textMap: {
        update: '编辑配置',
        create: '添加配置',
        look: '查看配置'
      },
      dialogStatus: '',
      pageNo: 0,
      totalPage: 0,
      pageSize: 10,
      tableData: [],
      status: '00',
      dialogFormVisible: false,
      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' }]
      },
      fileListOne: [],
      fileListTwo: [],
      fileListThree: [],
      importFileUrl: upLoadFileUrl,
      // 上传附件1参数
      upLoadDataOne: {
        bizId: '', // 业务主键Id-前端生成
        fileType: 'platform_config_img_regist'// 文件类型
      },
      // 上传附件2参数
      upLoadDataTwo: {
        bizId: '', // 业务主键Id-前端生成
        fileType: 'platform_config_ico_favicon'// 文件类型
      },
      // 上传附件3参数
      upLoadDataThree: {
        bizId: '', // 业务主键Id-前端生成
        fileType: 'platform_config_img_major'// 文件类型
      },
      temp: {
        // 传的参数
        id: '',
        imgRegist: '', // 图片1
        icoFavicon: '', // 图片2
        imgMajor: '', // 图片3
        platform: '', // 平台名称
        useStatus: '01', // 01正式; 02作废
        title: ''// 网页标题
      },
      downLoadFileUrl: downLoadFileUrl
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 上传网站图标成功的钩子
    successTwo(response, file) {
      if (response.header.ret === '0') {
        getFileDetail({ bizId: response.data.bizId, fileType: 'platform_config_ico_favicon' }).then(res => {
          if (res.header.ret === '0') {
            this.temp.icoFavicon = readImageRoot + res.data[0].path
          }
        })
      }
    },
    // 上传logo成功的钩子
    successThree(response, file) {
      if (response.header.ret === '0') {
        getFileDetail({ bizId: response.data.bizId, fileType: 'platform_config_img_major' }).then(res => {
          if (res.header.ret === '0') {
            this.temp.imgMajor = readImageRoot + res.data[0].path
          }
        })
      }
    },
    // 清空表单
    resetTemp() {
      this.temp = {
        id: '',
        imgRegist: '',
        icoFavicon: '',
        imgMajor: '',
        platform: '',
        useStatus: '01'
      }
      this.fileListOne = []
      this.fileListTwo = []
      this.fileListThree = []
    },
    // 新增配置
    addConfig() {
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.disabled = false
      this.resetTemp()
      this.upLoadDataOne.bizId = randomData()
      this.temp.id = this.upLoadDataOne.bizId
      this.upLoadDataTwo.bizId = this.upLoadDataOne.bizId
      this.upLoadDataThree.bizId = this.upLoadDataOne.bizId
    },
    // 获取数据
    getData() {
      const data = {
        pageNo: this.pageNo || 1,
        pageSize: this.pageSize || 10
      }
      getPlatformConfigList(data).then(response => {
        if (response.header.ret === '0') {
          this.initData(response)
        }
      }).catch(() => {
      })
    },
    // 数据初始化
    initData(tableData) {
      if (tableData === false) {
        this.tableData = []
      } else {
        this.tableData = tableData.data.records
        this.pageNo = tableData.data.pageNo || 1
        this.totalPage = tableData.data.total || 1
      }
    },
    // 编辑
    editBtn(id) {
      this.dialogFormVisible = true
      this.dialogStatus = 'update'
      this.disabled = false
      selectPlatformConfig(id).then(res => {
        if (res.header.ret === '0') {
          this.temp = res.data
          this.upLoadDataOne.bizId = this.temp.id
          this.upLoadDataTwo.bizId = this.temp.id
          this.upLoadDataThree.bizId = this.temp.id
          // 图片1
          getFileDetail({ bizId: id, fileType: 'platform_config_img_regist' }).then(res => {
            if (res.header.ret === '0') {
              const fileListData = res.data
              // 图片1
              this.fileListOne = []
              const fileDataOne = {
                name: fileListData[0].title + '.' + fileListData[0].extend,
                url: fileListData[0].path,
                fileId: fileListData[0].fileId,
                downLoadFileUrl: this.downLoadFileUrl,
                fileType: 'platform_config_img_regist',
                raw: {
                  type: fileListData[0].extend
                }
              }
              this.fileListOne.push(fileDataOne)
            }
          }).catch(() => {

          })
          // 图片2
          getFileDetail({ bizId: id, fileType: 'platform_config_ico_favicon' }).then(res => {
            if (res.header.ret === '0') {
              const fileListData = res.data
              // 图片2
              this.fileListTwo = []
              const fileDataTwo = {
                name: fileListData[0].title + '.' + fileListData[0].extend,
                url: fileListData[0].path,
                fileId: fileListData[0].fileId,
                downLoadFileUrl: this.downLoadFileUrl,
                fileType: 'platform_config_ico_favicon',
                raw: {
                  type: fileListData[0].extend
                }
              }
              this.fileListTwo.push(fileDataTwo)
            }
          }).catch(() => {

          })
          // 图片3
          getFileDetail({ bizId: id, fileType: 'platform_config_img_major' }).then(res => {
            if (res.header.ret === '0') {
              const fileListData = res.data
              // 图片3
              this.fileListThree = []
              const fileDataThree = {
                name: fileListData[0].title + '.' + fileListData[0].extend,
                url: fileListData[0].path,
                fileId: fileListData[0].fileId,
                downLoadFileUrl: this.downLoadFileUrl,
                fileType: 'platform_config_img_major',
                raw: {
                  type: fileListData[0].extend
                }
              }
              this.fileListThree.push(fileDataThree)
            }
          }).catch(() => {

          })
        }
      })
    },
    // 查看
    lookBtn(id) {
      this.dialogFormVisible = true
      this.dialogStatus = 'look'
      this.disabled = true
      selectPlatformConfig(id).then(res => {
        if (res.header.ret === '0') {
          this.temp = res.data
          // 图片1
          getFileDetail({ bizId: id, fileType: 'platform_config_img_regist' }).then(res => {
            if (res.header.ret === '0') {
              const fileListData = res.data
              // 图片1
              this.fileListOne = []
              const fileDataOne = {
                name: fileListData[0].title + '.' + fileListData[0].extend,
                url: fileListData[0].path,
                fileId: fileListData[0].fileId,
                downLoadFileUrl: this.downLoadFileUrl,
                fileType: 'platform_config_img_regist',
                raw: {
                  type: fileListData[0].extend
                },
                look: true
              }
              this.fileListOne.push(fileDataOne)
            }
          }).catch(() => {

          })
          // 图片2
          getFileDetail({ bizId: id, fileType: 'platform_config_ico_favicon' }).then(res => {
            if (res.header.ret === '0') {
              const fileListData = res.data
              // 图片2
              this.fileListTwo = []
              const fileDataTwo = {
                name: fileListData[0].title + '.' + fileListData[0].extend,
                url: fileListData[0].path,
                fileId: fileListData[0].fileId,
                downLoadFileUrl: this.downLoadFileUrl,
                fileType: 'platform_config_ico_favicon',
                raw: {
                  type: fileListData[0].extend
                },
                look: true
              }
              this.fileListTwo.push(fileDataTwo)
            }
          }).catch(() => {

          })
          // 图片3
          getFileDetail({ bizId: id, fileType: 'platform_config_img_major' }).then(res => {
            if (res.header.ret === '0') {
              const fileListData = res.data
              // 图片3
              this.fileListThree = []
              const fileDataThree = {
                name: fileListData[0].title + '.' + fileListData[0].extend,
                url: fileListData[0].path,
                fileId: fileListData[0].fileId,
                downLoadFileUrl: this.downLoadFileUrl,
                fileType: 'platform_config_img_major',
                raw: {
                  type: fileListData[0].extend
                },
                look: true
              }
              this.fileListThree.push(fileDataThree)
            }
          }).catch(() => {

          })
        }
      })
    },
    // 删除
    delBtn(id) {
      this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePlatformConfig(id).then(res => {
          if (res.header.ret === '0') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getData()
          }
        })
      }).catch(() => {
      })
    },
    // 分页之获取页面size
    handleSizeChange(value) {
      this.pageSize = value
      this.getData()
    },
    // 分页之获取第几页
    pickHandle(val) {
      this.pageNo = val
      this.getData()
    },
    // 编辑确定
    updateData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updatePlatformConfig(this.temp).then(res => {
            if (res.header.ret === '0') {
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              this.dialogFormVisible = false
              this.getData()
            }
          })
        }
      })
    },
    // 保存确定
    createData(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">
.img_pic {
  max-height: 50px;
}
</style>
