<!-- 配置详情 -->
<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"
             @tab-click="tabChange"
             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="120"
                           prop="customizedName">

          </el-table-column>
          <el-table-column label="自定义名称"
                           header-align="center"
                           align="center"
                           width="120"
                           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="moveUpResi( scope.$index)"
                         icon="el-icon-top"></el-button>

            </template>
          </el-table-column>
          <!--操作列-->
          <el-table-column label="操作"
                           header-align="center"
                           align="center"
                           class="operate"
                           width="250">
            <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="editResiShow( scope.$index)">修改</el-button>
              <el-button v-if="userType==='oper'"
                         size="mini"
                         type="primary"
                         @click.stop="showPermission( scope.row.functionId)">角色权限</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"
                           min-width="100"
                           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"
                           min-width="100"
                           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="moveUpWork( scope.$index)"
                         icon="el-icon-top"></el-button>

            </template>
          </el-table-column>
          <!--操作列-->
          <el-table-column label="操作"
                           header-align="center"
                           align="center"
                           class="operate"
                           width="250">
            <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="editWorkShow( scope.$index)">修改</el-button>
              <el-button v-if="userType==='oper'"
                         size="mini"
                         type="primary"
                         @click.stop="showPermission( scope.row.functionId)">角色权限</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="dialogWidth"
              :dialogHeight="dialogHeight"
              :visible="upOrDownDia.visible"
              @cancel="upOrDownDiaCancel"
              @ok="upOrDownDiaOk">
      <div style="margin-top:20px">
        <el-form :inline="false"
                 :model="upOrDownForm"
                 :rules="formRule"
                 ref="upOrDownForm"
                 :label-width="'100px'">
          <el-form-item v-if="optionType!=='1'"
                        label="角色">
            <div style="overflow-x:auto">

              <el-checkbox style="width:'500px'"
                           :indeterminate="isIndeterminate"
                           v-model="checkAll"
                           @change="handleCheckAllChange">全选</el-checkbox>

              <el-checkbox-group style="width:'500px'"
                                 v-model="roleCheckedArray"
                                 @change="handleCheckedCitiesChange">
                <el-checkbox v-for="item in roleAllList"
                             :label="item.roleKey"
                             :key="item.roleKey">{{item.roleName}}</el-checkbox>
              </el-checkbox-group>
            </div>

          </el-form-item>
          <el-form-item v-if="optionType!=='3'"
                        label="理由"
                        prop="reason">
            <el-input type="textarea"
                      :autosize="{ minRows: 4, maxRows: 7}"
                      :rows="5"
                      resize="none"
                      style="width:400px"
                      placeholder='请输入理由'
                      v-model="upOrDownForm.reason">
            </el-input>

          </el-form-item>
        </el-form>

      </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服务
import { requestPost } from "@/js/dai/request";

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: '',
        roleList: [],
      },
      // resiRoleList:[],//居民端角色
      // govRoleList:[],//工作端角色
      roleList: {},//所有端的角色列表
      roleAllList: [],//所有的角色列表
      roleCheckedArray: [],//选择的角色列表
      checkAll: true,//是否全选
      isIndeterminate: true,

      optionType: '' // 1 上架 /下架  2采集  3权限

    }
  },
  components: {
    CDialog, ConfigEdit
  },
  mounted () {
    this.renderSelData()
    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
    },
    dialogHeight () {
      return 0.8
    },
    dialogWidth () {

      return this.resolution === 'small' ? 60 : 60
    },
    checkWidth () {

      return document.documentElement.clientWidth * (this.dialogWidth / 100)
    },

    ...mapGetters(['clientHeight', 'resolution']),
    formRule () {
      return {
        reason: [
          { required: true, message: "请填写理由", trigger: 'blur' }
        ]

      }
    }
  },
  methods: {
    async renderSelData () {
      this.startLoading()
      const url = "/epmetuser/govstaffrole/resigovrolelist"
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/epmetuser/govstaffrole/resigovrolelist"
      const params = {}
      const { data, code, msg, internalMsg } = await requestPost(url, params)
      if (code === 0) {
        this.roleList = data
        this.roleAllList = this.activeName === 'resi' ? data.resiRoleList : data.govRoleList
        this.roleAllList.forEach(item => {
          this.roleCheckedArray.push(item.roleKey)
        })
      } else {
        this.$message.error(msg + "：" + internalMsg)
      }
      this.endLoading()
    },
    tabChange (val) {

      if (val.name === 'resi') {
        this.roleAllList = this.roleList.resiRoleList
      } else {
        this.roleAllList = this.roleList.govRoleList
      }
    },
    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 () {
      this.$refs['upOrDownForm'].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj)
          return false
        }
        let url = ''
        //  const url = '/oper/customize/customerfunctiondetail/updateshoppingstatus'
        if (this.optionType === '3') {//设置权限
          this.savePermission()
          return
        } else if (this.optionType === '1') {//上、下架
          // url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctiondetail/updateshoppingstatus'
          url = '/oper/customize/customerfunctiondetail/updateshoppingstatus'
        } else if (this.optionType === '2') {//采集
          if (this.roleCheckedArray.length === 0) {
            this.$message.warning('所选角色数量必须大于1')
            return false
          }
          // 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) => {

            if (this.optionType === '2') {
              this.savePermission()
            } else {
              this.$message.success('操作成功')
            }
            this.upOrDownDia.visible = false
            this.loadTableData()
            this.endLoading()
          },
          (rspMsg, data) => {
            this.$message.error(rspMsg)
          })
      })
    },
    // 编辑
    editResiShow (index) {
      this.$refs['ref_config_edit'].init(this.resiHaveList[index])
    },
    // 编辑
    editWorkShow (index) {
      this.$refs['ref_config_edit'].init(this.workHaveList[index])
    },
    editDiaOK () {
      this.loadTableData()
    },

    // 设置权限
    showPermission (functionId) {

      this.optionType = '3'
      this.upOrDownDia.title = "角色权限"
      this.upOrDownForm = {
        customerId: this.customerId,
        functionId: functionId,
      }
      this.getPermission()
      this.upOrDownDia.visible = true

    },
    //获取权限
    async getPermission () {
      this.startLoading()
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctionrole/customerfunctionrolelist"
      const url = "/oper/customize/customerfunctionrole/customerfunctionrolelist"
      // this.upOrDownForm.roleList = roleList

      const { data, code, msg, internalMsg } = await requestPost(url, this.upOrDownForm)

      if (code === 0) {

        this.roleCheckedArray = []

        data.forEach(item => {
          this.roleCheckedArray.push(item.roleKey)
        })
        if (this.roleCheckedArray.length === 0) {
          this.checkAll = false
          this.isIndeterminate = false
        } else if (this.roleCheckedArray.length === this.roleAllList.length) {
          this.checkAll = true
          this.isIndeterminate = false
        } else {
          this.checkAll = false
          this.isIndeterminate = true
        }



      } else {
        this.$message.error(msg + "：" + internalMsg)
      }
      this.endLoading()

    },
    //设置权限
    async savePermission () {

      if (this.roleCheckedArray.length === 0) {
        this.$message.warning('所选角色数量必须大于1')
        return false
      }
      this.startLoading()
      this.upOrDownForm.roleList = []
      this.roleAllList.forEach(allItem => {
        this.roleCheckedArray.forEach(selItem => {
          let obj = {}
          if (selItem === allItem.roleKey) {
            obj.roleKey = allItem.roleKey
            obj.roleName = allItem.roleName
            this.upOrDownForm.roleList.push(obj)

          }
        })
      })
      this.upOrDownForm.fromApp = this.activeName
      console.log(this.upOrDownForm)
      const url = "/oper/customize/customerfunctionrole/savecustomerfunctionrole"
      // const url = "https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/customerfunctionrole/savecustomerfunctionrole"
      // this.upOrDownForm.roleList = roleList

      const { data, code, msg, internalMsg } = await requestPost(url, this.upOrDownForm)
      if (code === 0) {
        this.$message.success('操作成功')
        this.upOrDownDia.visible = false

      } else {
        this.$message.error(msg + "：" + internalMsg)
      }
      this.endLoading()
    },
    handleCheckAllChange (val) {
      this.roleCheckedArray = []
      if (val) {
        this.roleAllList.forEach(item => {
          this.roleCheckedArray.push(item.roleKey)
        })
      }

      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange (value) {

      let checkedCount = value.length;
      this.checkAll = checkedCount === this.roleAllList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.roleAllList.length;
    },

    // 采集
    addFunction (row) {
      this.optionType = '2'
      this.upOrDownDia.title = '采集'
      this.upOrDownForm = {
        customerId: row.customerId,
        functionId: row.functionId,
        reason: ''
      }
      this.roleCheckedArray = []
      this.roleAllList.forEach(item => {
        this.roleCheckedArray.push(item.roleKey)
      })
      this.checkAll = true
      this.isIndeterminate = false
      this.upOrDownDia.visible = true
    },

    // 上移
    moveUpResi (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 = {}

          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
      }
    },
    // 上移
    moveUpWork (index) {
      if (index > 0) {
        console.log(this.workHaveList)
        this.startLoading()
        let resultList = []
        let one = {}
        for (let i = 0; i < this.workHaveList.length; i++) {
          let obj = {}

          if (i === index - 1) {
            one.customerId = this.workHaveList[i].customerId
            one.functionId = this.workHaveList[i].functionId
            one.displayOrder = index
          } else if (i === index) {
            obj.customerId = this.workHaveList[i].customerId
            obj.functionId = this.workHaveList[i].functionId
            obj.displayOrder = index - 1
            resultList.push(obj)
            resultList.push(one)
          } else {
            obj.customerId = this.workHaveList[i].customerId
            obj.functionId = this.workHaveList[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>
