<!-- 配置详情 -->
<template>
  <div style=" position: relative;">
    <div v-if="userType==='oper'"
         class="div_btn">
      <span style="margin-right:20px">{{customerName}}</span>
      <el-button type="default"
                 size="mini"
                 @click="diaCancel">取消返回</el-button>
      <el-button type="primary"
                 size="mini"
                 @click="setDomainName">设置业务域名</el-button>

    </div>
    <el-tabs v-model="activeName"
             class="el-tabs">
      <el-tab-pane label="居民端"
                   name="resi">
        <el-table :data="resiHaveList"
                  border
                  v-loading="loading"
                  element-loading-text="正在加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255, 255， 255, 0.8)"
                  :row-style="{height:'30px'}"
                  :cell-style="{padding:'5px'}"
                  style="width: 100%;"
                  :height="tableHeight1"
                  ref="ref_customer_table">

          <el-table-column label="排序"
                           type="index"
                           align="center"
                           width="50"></el-table-column>
          <el-table-column label="默认名称"
                           header-align="center"
                           align="center"
                           width="150"
                           prop="customizedName">

          </el-table-column>
          <el-table-column label="自定义名称"
                           header-align="center"
                           align="center"
                           width="150"
                           prop="functionName">

          </el-table-column>
          <el-table-column label="功能说明"
                           header-align="center"
                           align="center"
                           prop="functionExplain">

          </el-table-column>

          <el-table-column label="大图标"
                           header-align="center"
                           align="center"
                           width="150"
                           prop="iconLargeImg">
            <template slot-scope="scope">
              <el-image v-if="scope.row.iconLargeImg"
                        style="width: 50px; height: 50px;text-align: center;"
                        :src="scope.row.iconLargeImg"
                        :preview-src-list="[scope.row.iconLargeImg]">
              </el-image>

            </template>
          </el-table-column>

          <el-table-column label="小图标"
                           header-align="center"
                           align="center"
                           width="110"
                           prop="iconSmallImg">
            <template slot-scope="scope">
              <el-image v-if="scope.row.iconSmallImg"
                        style="width: 40px; height: 40px;text-align: center;"
                        :src="scope.row.iconSmallImg"
                        :preview-src-list="[scope.row.iconSmallImg]">
              </el-image>

            </template>
          </el-table-column>

          <el-table-column label="上架状态"
                           header-align="center"
                           align="center"
                           width="100"
                           prop="shoppingStatusShow">

          </el-table-column>
          <!--操作列-->
          <el-table-column label="移动"
                           header-align="center"
                           align="center"
                           class="operate"
                           width="50">
            <template slot-scope="scope">

              <el-button type="text"
                         style="width=100px;height=100px"
                         @click.stop="moveUp( scope.$index)"
                         icon="el-icon-top"></el-button>

            </template>
          </el-table-column>
          <!--操作列-->
          <el-table-column label="操作"
                           header-align="center"
                           align="center"
                           class="operate"
                           width="200">
            <template slot-scope="scope">

              <el-button v-if="scope.row.shoppingStatus==0"
                         size="mini"
                         class="btn_putaway"
                         type="primary"
                         @click.stop="upOrDown(scope.row.functionId, '1')">上架</el-button>
              <el-button v-if="scope.row.shoppingStatus===1"
                         size="mini"
                         class="btn_putaway"
                         type="primary"
                         @click.stop="upOrDown(scope.row.functionId, '0')">下架</el-button>
              <el-button size="mini"
                         type="primary"
                         @click.stop="editShow( scope.$index)">修改</el-button>
              <!-- <el-button size="mini"
                     type="primary"
                     @click.stop="moveUp( scope.$index)">上移</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <el-table v-if="userType==='oper'"
                  :data="resiNoList"
                  border
                  v-loading="noLoading"
                  element-loading-text="正在加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255, 255， 255, 0.8)"
                  :row-style="{height:'30px'}"
                  style="width: 100%;margin-top:10px"
                  :height="tableHeight2"
                  ref="ref_customer_table">

          <el-table-column label="排序"
                           type="index"
                           align="center"
                           width="50"></el-table-column>
          <el-table-column label="默认名称"
                           header-align="center"
                           align="center"
                           width="150"
                           prop="customizedName">

          </el-table-column>

          <el-table-column label="功能说明"
                           header-align="center"
                           align="center"
                           prop="customizedName">

          </el-table-column>

          <!--操作列-->
          <el-table-column label="操作"
                           header-align="center"
                           align="center"
                           class="operate"
                           width="200">
            <template slot-scope="scope">

              <el-button size="mini"
                         class="btn_putaway"
                         type="primary"
                         @click.stop="addFunction(scope.row)">采集</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="工作端"
                   name="gov">
        <el-table :data="workHaveList"
                  border
                  v-loading="loading"
                  element-loading-text="正在加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255, 255， 255, 0.8)"
                  :row-style="{height:'30px'}"
                  :cell-style="{padding:'5px'}"
                  style="width: 100%;"
                  :height="tableHeight1"
                  ref="ref_customer_table">

          <el-table-column label="排序"
                           type="index"
                           align="center"
                           width="50"></el-table-column>
          <el-table-column label="默认名称"
                           header-align="center"
                           align="center"
                           width="150"
                           prop="customizedName">

          </el-table-column>
          <el-table-column label="自定义名称"
                           header-align="center"
                           align="center"
                           width="150"
                           prop="functionName">

          </el-table-column>
          <el-table-column label="功能说明"
                           header-align="center"
                           align="center"
                           prop="functionExplain">

          </el-table-column>

          <el-table-column label="大图标"
                           header-align="center"
                           align="center"
                           width="150"
                           prop="iconLargeImg">
            <template slot-scope="scope">
              <el-image v-if="scope.row.iconLargeImg"
                        style="width: 50px; height: 50px;text-align: center;"
                        :src="scope.row.iconLargeImg"
                        :preview-src-list="[scope.row.iconLargeImg]">
              </el-image>

            </template>
          </el-table-column>

          <el-table-column label="小图标"
                           header-align="center"
                           align="center"
                           width="110"
                           prop="iconSmallImg">
            <template slot-scope="scope">
              <el-image v-if="scope.row.iconSmallImg"
                        style="width: 40px; height: 40px;text-align: center;"
                        :src="scope.row.iconSmallImg"
                        :preview-src-list="[scope.row.iconSmallImg]">
              </el-image>

            </template>
          </el-table-column>

          <el-table-column label="上架状态"
                           header-align="center"
                           align="center"
                           width="100"
                           prop="shoppingStatusShow">

          </el-table-column>
          <!--操作列-->
          <el-table-column label="移动"
                           header-align="center"
                           align="center"
                           class="operate"
                           width="50">
            <template slot-scope="scope">

              <el-button type="text"
                         style="width=100px;height=100px"
                         @click.stop="moveUp( scope.$index)"
                         icon="el-icon-top"></el-button>

            </template>
          </el-table-column>
          <!--操作列-->
          <el-table-column label="操作"
                           header-align="center"
                           align="center"
                           class="operate"
                           width="200">
            <template slot-scope="scope">

              <el-button v-if="scope.row.shoppingStatus==0"
                         size="mini"
                         class="btn_putaway"
                         type="primary"
                         @click.stop="upOrDown(scope.row.functionId, '1')">上架</el-button>
              <el-button v-if="scope.row.shoppingStatus===1"
                         size="mini"
                         class="btn_putaway"
                         type="primary"
                         @click.stop="upOrDown(scope.row.functionId, '0')">下架</el-button>
              <el-button size="mini"
                         type="primary"
                         @click.stop="editShow( scope.$index)">修改</el-button>
              <!-- <el-button size="mini"
                     type="primary"
                     @click.stop="moveUp( scope.$index)">上移</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <el-table v-if="userType==='oper'"
                  :data="workNoList"
                  border
                  v-loading="noLoading"
                  element-loading-text="正在加载中"
                  element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(255, 255， 255, 0.8)"
                  :row-style="{height:'30px'}"
                  style="width: 100%;margin-top:10px"
                  :height="tableHeight2"
                  ref="ref_customer_table">

          <el-table-column label="排序"
                           type="index"
                           align="center"
                           width="50"></el-table-column>
          <el-table-column label="默认名称"
                           header-align="center"
                           align="center"
                           width="150"
                           prop="customizedName">

          </el-table-column>

          <el-table-column label="功能说明"
                           header-align="center"
                           align="center"
                           prop="customizedName">

          </el-table-column>

          <!--操作列-->
          <el-table-column label="操作"
                           header-align="center"
                           align="center"
                           class="operate"
                           width="200">
            <template slot-scope="scope">

              <el-button size="mini"
                         class="btn_putaway"
                         type="primary"
                         @click.stop="addFunction(scope.row)">采集</el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <c-dialog :title="upOrDownDia.title"
              :width="40"
              :dialogHeight="0.5"
              :visible="upOrDownDia.visible"
              @cancel="upOrDownDiaCancel"
              @ok="upOrDownDiaOk">
      <div style="text-align:center;margin-top:40px">
        <el-input type="textarea"
                  :autosize="{ minRows: 4, maxRows: 7}"
                  :rows="5"
                  resize="none"
                  style="width:500px"
                  placeholder='请输入理由'
                  v-model="upOrDownForm.reason">
        </el-input>
      </div>
    </c-dialog>

    <config-edit ref="ref_config_edit"
                 @editDiaOK="editDiaOK">

    </config-edit>

  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import ConfigEdit from './ConfigEdit'
import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading // 加载动画
export default {
  data () {
    return {
      loading: false,
      noLoading: false,
      customerId: '', // 客户id，父组件传
      customerName: '', // 客户名称，父组件传

      //tab页
      activeName: 'resi',
      // 定制功能
      resiHaveList: [],
      workHaveList: [],

      // 未添加的功能
      resiNoList: [],
      workNoList: [],

      uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/function/upload',

      // 上架定制功能相关
      upOrDownDia: {
        visible: false,
        title: '理由',
      },
      upOrDownForm: {
        customerId: '',
        functionId: '',
        shoppingStatus: '',
        reason: ''
      },
      optionType: '' // 1 上架 /下架  2采集

    }
  },
  components: {
    CDialog, ConfigEdit
  },
  mounted () {
    this.initData(localStorage.getItem('customerId'), localStorage.getItem('customerName'))
  },
  computed: {
    userType () {
      return localStorage.getItem('userType')
    },
    tableHeight1 () {
      if (this.userType === 'oper') {
        return (this.clientHeight - 220) / 2 + 50
      } else {
        return (this.clientHeight - 220)
      }

    },
    tableHeight2 () {
      return (this.clientHeight - 220) / 2 - 60
    },
    ...mapGetters(['clientHeight']),
    dataRule () {
      return {
        customizedName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        functionIcon: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        functionGroup: [
          { 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' }
        ]
      }
    }
  },
  methods: {
    initData (customerId, customerName) {
      this.customerId = customerId
      this.customerName = customerName
      this.loadTableData()
    },
    // 设置业务域名
    setDomainName () {
      this.startLoading()
      let params = {
        customerId: this.customerId
      }
      const url = '/oper/customize/functioncustomized/customerdomainname'
      // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/functioncustomized/customerdomainname'
      window.app.ajax.post(url, params,
        (data, rspMsg) => {
          this.endLoading()
          this.$message.success('设置成功')
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        })
    },

    // 获取列表数据
    loadTableData () {
      this.loading = true
      let params = {
        customerId: this.customerId
      }
      const url = '/oper/customize/customerfunctiondetail/customerfunctionlist'
      // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/customerfunctionlist'
      window.app.ajax.post(url, params,
        (data, rspMsg) => {
          this.$nextTick(() => {
            this.resiHaveList = data.customerList.filter(item => item.fromApp === 'resi')
            this.workHaveList = data.customerList.filter(item => item.fromApp === 'gov')

            this.resiNoList = data.functionList.filter(item => item.fromApp === 'resi')
            this.workNoList = data.functionList.filter(item => item.fromApp === 'gov')

            this.resiHaveList.forEach(element => {
              element.shoppingStatusShow = element.shoppingStatus === 0 ? element.shoppingStatusShow = '下架' : '上架'
            })
            this.workHaveList.forEach(element => {
              element.shoppingStatusShow = element.shoppingStatus === 0 ? element.shoppingStatusShow = '下架' : '上架'
            })
          })
        },
        (rspMsg, data) => {
          this.endLoading()
          this.$message.error(rspMsg)
        })
      this.loading = false
    },

    // 上架/下架
    upOrDown (functionId, shoppingStatus) {
      this.optionType = '1'
      this.upOrDownDia.title = shoppingStatus === 0 ? '下架原因' : '上架原因'
      this.upOrDownForm = {
        customerId: this.customerId,
        functionId: functionId,
        shoppingStatus: shoppingStatus,
        reason: ''
      }
      this.upOrDownDia.visible = true
    },

    upOrDownDiaCancel () {
      this.upOrDownDia.visible = false
    },
    upOrDownDiaOk () {
      let url = ''
      //  const url = '/oper/customize/customerfunctiondetail/updateshoppingstatus'
      if (this.optionType === '1') {
        // url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/updateshoppingstatus'
        url = '/oper/customize/customerfunctiondetail/updateshoppingstatus'
      } else {
        // url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/customerfunctioncollect'
        url = '/oper/customize/customerfunctiondetail/customerfunctioncollect'
      }
      this.startLoading()

      window.app.ajax.post(url, this.upOrDownForm,
        (data, rspMsg) => {
          this.$message.success('操作成功')
          this.upOrDownDia.visible = false
          this.loadTableData()
        },
        (rspMsg, data) => {
          this.$message.error(rspMsg)
        })
      this.endLoading()
    },
    // 编辑
    editShow (index) {
      this.$refs['ref_config_edit'].init(this.resiHaveList[index])
    },
    editDiaOK () {
      this.loadTableData()
    },

    // 采集
    addFunction (row) {
      this.optionType = '2'
      this.upOrDownDia.title = '采集原因'
      this.upOrDownForm = {
        customerId: row.customerId,
        functionId: row.functionId,
        reason: ''
      }
      this.upOrDownDia.visible = true
    },

    // 上传大图标成功
    handleLargeSuccess (res, file, index) {
      if (res.code === 0 && res.msg === 'success') {
        this.resiHaveList[index].iconLargeImg = res.data.url
      } else {
        this.$message.error(res.msg)
      }
    },
    // 上传小图标成功
    handleSmallSuccess (res, file, index) {
      if (res.code === 0 && res.msg === 'success') {
        this.resiHaveList[index].iconSmallImg = res.data.url
      } else {
        this.$message.error(res.msg)
      }
    },
    beforeAvatarUpload (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
    },

    // 上移
    moveUp (index) {
      if (index > 0) {
        console.log(this.resiHaveList)
        this.startLoading()
        let resultList = []
        let one = {}
        for (let i = 0; i < this.resiHaveList.length; i++) {
          let obj = {}
          // eslint-disable-next-line
          // debugger
          if (i === index - 1) {
            one.customerId = this.resiHaveList[i].customerId
            one.functionId = this.resiHaveList[i].functionId
            one.displayOrder = index
          } else if (i === index) {
            obj.customerId = this.resiHaveList[i].customerId
            obj.functionId = this.resiHaveList[i].functionId
            obj.displayOrder = index - 1
            resultList.push(obj)
            resultList.push(one)
          } else {
            obj.customerId = this.resiHaveList[i].customerId
            obj.functionId = this.resiHaveList[i].functionId
            obj.displayOrder = i
            resultList.push(obj)
          }
        }
        console.log(resultList)

        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/updatedisplayorder'
        const url = '/oper/customize/customerfunctiondetail/updatedisplayorder'
        window.app.ajax.post(url, resultList,
          (data, rspMsg) => {
            this.endLoading()
            // this.$message.success('操作成功')
            this.loadTableData()
          },
          (rspMsg, data) => {
            this.endLoading()
            this.$message.error(rspMsg)
          })

      } else {
        this.$message.warning('无法上移')

        return false
      }
    },

    // 取消
    diaCancel () {
      this.$emit('cancleBack')
    },

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

  }
}
</script>
<style scoped >
.el-tabs {
  margin: 0 10px;
}

.form_item {
  width: 200px;
}
.div_btn {
  z-index: 10;
  position: absolute;
  right: 10px;
  top: 5px;
  /* margin: 0 0 20px 0; */
}
.btn_soldout {
  background-color: rgb(255, 79, 79);
  border-color: rgb(255, 79, 79);
}
.btn_putaway {
  background-color: rgb(89, 161, 255);
  border-color: rgb(89, 161, 255);
}
.el-icon-top {
  font-weight: 600 !important;
  font-size: 100px !important;
}
.el-card__body {
  padding: 10px !important;
}
</style>
