<template>
  <div v-loading="pageLoading" class="app-container">
    <card-table :loading="loading" :modalData="contractList" :searchParams="queryParams"
                :tableSearch="true" labelWidth="120px" @columnSearch="handleQuery" @pagination="getList" :max-height="$store.getters.tableMaxHeight"
                @selection-change="handleSelectionChange" @resetList="resetQuery" @sortChange="sortChange" show-no show-selection>
      <template #operations="{ selections }">
        <el-button v-hasPermi="['contract:add']" icon="el-icon-plus" size="mini" type="primary"
                   @click="handleAdd">{{ $t('common.add') + $t('contract.contract')}}
        </el-button>
        <el-button v-hasPermi="['contract:export']" icon="el-icon-download" size="mini" plain
                   @click="handleExport">{{ $t('common.export') }}
        </el-button>
      </template>
      <template #default="{ list }">
        <!--合同号-->
        <Column :label="$t('contract.contractNo')" :searchParams="queryParams" :showSearch="true" fixed  prop="contractNo"  >
          <template #default="{ row }">
            <span @click="handleView(row)" class="link-type">{{ row.contractNo }}</span>
          </template>
        </Column>
        <!-- 合同名 -->
        <Column :label="$t('lift.contractName')"  :searchParams="queryParams" :showSearch="true" prop="contractName" />
        <!--区域-->
        <Column :label="$t('user.area')" prop="areaId" :showSearch="true" searchType="select" :searchDict="areaList" :searchParams="queryParams" :min-width="200" :selectMore="true"/>
        <!--国家-->
        <Column :label="$t('account.country')" prop="countryId" :showSearch="true" searchType="select" :searchDict="curCountryOps"  :searchParams="queryParams" :min-width="200" :selectMore="true"/>
        <!--城市-->
        <Column :label="$t('project.city')" prop="city" show-search :searchParams="queryParams"/>
        <!--业务员-->
        <Column :label="$t('contract.salesman')" prop="salesman" width="250" show-search :searchParams="queryParams">
          <template #default="{ row }">
            {{ getNickName(row.salesman) }}
          </template>
        </Column>
        <!--代理商-->
        <Column :label="$t('agent.agent')" prop="agentId" :showSearch="true" searchType="select" :searchDict="curAgentOps" :searchParams="queryParams" :min-width="200" :selectMore="true"/>
        <!--终端客户  v-hasRole="['system_manager', 'sales_director']" -->
        <Column :label="$t('contract.endCustomers')" prop="endCustomersName" show-search :searchParams="queryParams"/>
        <!--贸易条款-->
        <Column :label="$t('contract.tradeTerms')" :searchDict="dict.type.contract_trade_terms" :showSearch="true" prop="tradeTerms" selectProp="origins"
                searchType="select" selectMore :searchParams="queryParams"/>
        <!--销售模式-->
        <Column :label="$t('contract.salesModel')" :searchDict="dict.type.contract_sales_model" :showSearch="true" prop="salesModel" selectProp="origins"
                searchType="select" selectMore :searchParams="queryParams"/>
        <!--地址-->
        <Column :label="$t('contract.address')" prop="address" show-search :searchParams="queryParams"/>
        <!--电话-->
        <Column :label="$t('contract.telephone')" prop="telephone" show-search :searchParams="queryParams"/>
        <!--邮件-->
        <Column :label="$t('contract.email')" prop="email" show-search :searchParams="queryParams"/>
        <!--装船口岸-->
        <Column :label="$t('contract.shipmentPort')" prop="shipmentPort" show-search :searchParams="queryParams"/>
        <!--装船期限-->
        <Column :label="$t('contract.shipmentDeadline')"  :searchParams="queryParams" prop="shipmentDeadline" search-type="dateRange"  width="250" :showSearch="true"/>
        <!--目的口岸-->
        <Column :label="$t('contract.destinationPort')" prop="destinationPort" show-search :searchParams="queryParams"/>
        <!--商标-->
        <Column :label="$t('contract.shippingMark')" prop="shippingMark" show-search :searchParams="queryParams"/>
        <!--审批状态-->
        <Column :label="$t('contract.approveStatus')" :searchDict="dict.type.contract_approval_status" :showSearch="true" prop="approveStatus"
                searchType="select" selectMore :searchParams="queryParams"/>
        <!--审批流程状态-->
        <Column label="审批流程状态"
                :searchDict="dict.type.audit_status.filter(it => (it.value >= '196' && it.value <= '200') || it.value=== '30' || it.value=== '40'|| it.value=== '0')"
                :showSearch="true" prop="flowStatus"
                searchType="select" selectMore :searchParams="queryParams">
          <template #default="{ row }">
            <ColorDictTag :bgc="statusColorMap[row.flowStatus].bgc" :label="convertStatus(row.flowStatus)" :label-color="statusColorMap[row.flowStatus].color"
                          @click.native="main.showAuditHistory(row.id, [3, 4].join(','), agentFlag)"/>
          </template>
        </Column>

<!--          编辑  审批 变更  取消-->
        <Column :label="$t('common.operate')" :min-width="180" :showSearch="true" fixed="right" searchType="operate" :searchParams="queryParams">
              <template #default="{ row }">
                <MoreBtn :handle-command="handleCommand" :row="row" :btns="[
                  { label: $t('common.edit'), command: 'edit', icon: 'el-icon-edit', permi: 'contract:edit' ,showAble: hasPermission(row) && row.approveStatus !== '0' && row.approveStatus !== '2'},
                  { label: $t('contract.approve'), command: 'approve', icon: 'el-icon-edit', permi: 'contract:approve' ,showAble: hasPermissionApprove(row) && row.approveStatus === '0' && main.isAuditor(row.flow) },
                  { label: $t('contract.amendment'), command: 'amendment', icon: 'el-icon-refresh', permi: 'contract:amendment',showAble:hasPermission(row) && row.approveStatus === '2'},
                  // { label: $t('contract.delete'), command: 'delete', icon: 'el-icon-delete', permi: 'contract:delete', showAble:hasPermission(row) && row.approveStatus === '0' },
                  { label: $t('contract.delete'), command: 'cancel', icon: 'el-icon-refresh-left', permi: 'contract:cancel', showAble:hasPermission(row) && row.approveStatus === '0' },
                  { label: $t('contract.toVoid'), command: 'toVoid', icon: 'el-icon-refresh-left', permi: 'contract:toVoid', showAble:hasPermission(row) && row.approveStatus === '2' },
            ]"/>
              </template>
        </Column>
      </template>
    </card-table>
<!--    <DialogPage ref="approveDialog" :title="approveTitle" maxWidth="800px" :disabled="approveDisabled" label-position="top" :header="true">-->
<!--      -->
<!--    </DialogPage>-->
    <!--审批dialog-->
    <el-dialog :close-on-click-modal="false" :title="approveTitle" :visible.sync="approveOpen" append-to-body
               custom-class="edit-dialog" width="24vw" >
      <el-form ref="equipmentForm" :model="approveForm" :rules="approveFormRules" label-position="top" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="24">
            <!-- 合同号-->
            <Input :label = "$t('contract.contractNo')"  prop="contractNo" width="100%" disabled/>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <!-- 合同号-->
            <Input label = "备注"  prop="approveRemark" width="100%" type="textarea" style="height: 100px" :rows="5" :maxlength="500"/>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!--通过-->
        <el-button icon="el-icon-circle-check" type="success" @click="approveYes">{{ $t('contract.approveYes') }}</el-button>
        <!--驳回-->
        <el-button icon="el-icon-circle-close" type="primary" @click="approveNo">{{ $t('contract.approveNo') }}</el-button>
        <el-button icon="el-icon-remove-outline" @click="approveCancel">{{ $t('common.cancel') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import tcAgentHistory from "@/views/user/tcAgentHistory/index.vue";
import Column from "@/components/element/table/Column.vue";
import {checkRole} from "@/utils/permission";
import {getArea, listAgent} from "@/api/user/agent";
import {getAreaTreeByUser} from "@/api/common/common";
import {getCountryList} from "@/api/business/crm/follow";
import MoreBtn from "@/components/MoreBtn/index.vue";
import DialogPage from "@/components/element/Dialog.vue";
import {
  delContract,
  editFlow,
  getContractById,
  listContract,
  listContractBo,
  updateContract
} from "@/api/contract/contract";
import {getAllAreaList} from "@/api/user/area";
import {curAgent} from "@/api/business/crm/lead";
import {getAllOwnerList, getAuthRole} from "@/api/system/user";
import {audit} from "@/api/system/flow";
import {rollback} from "@/api/audit/flow";
import {parseTime} from "@/utils/ruoyi";
import CardTable from "@/components/element/table/CardTable.vue";
import {getAllNationNeedLanguageList} from "@/api/user/country";
import ColorDictTag from "@/views/crmManagement/lead/ColorDictTag/index.vue";
import TextBox from "@/components/element/form/items/TextBox.vue";

const statusColorMap = {
  0: {
    color: "#24CA5D",
    bgc: "rgba(24,199,84,0.12)",
  },
  30: {
    color: "#8B71FD",
    bgc: "rgba(139,113,253,0.12)",
  },
  40: {
    color: "#0DCCD7",
    bgc: "rgba(13,204,215,0.12)",
  },
  196: {
    color: "#218AFC",
    bgc: "#E5F1FF",
  },
  197: {
    color: "#FC5821",
    bgc: "rgba(252,88,33,0.12)",
  },
  198: {
    color: "#AD2BBF",
    bgc: "rgba(163,32,181,0.12)",
  },
  199: {
    color: "#0B8B21",
    bgc: "rgba(11,139,33,0.12)",
  },
  200: {
    color: '#D71943',
    bgc: '#FAEDED'
  },
  8: {
    color: '#F83863',
    bgc: 'rgba(215, 25, 67, 0.07)'
  },
  9: {
    color: '#E4A148',
    bgc: 'rgba(228, 161, 72, 0.17)'
  },
  10: {
    color: '#8DAACC',
    bgc: 'rgba(141, 170, 204, 0.18)'
  },
  11: {
    color: 'rgba(25, 108, 215, 1)',
    bgc: 'rgba(25, 108, 215, 0.18)'
  },
  12: {
    color: 'rgba(18, 233, 164, 1)',
    bgc: 'rgba(18, 233, 164, 0.17)'
  },
  undefined: {
    color: "#D71943",
    bgc: "#FAEDED",
  },
  null: {
    color: "#D71943",
    bgc: "#FAEDED",
  },
};
export default {
  name: "Contract",
  inject: ["main"],
  components: {TextBox, ColorDictTag, CardTable, DialogPage, MoreBtn, Column},
  dicts: [ 'audit_status','agent_type', 'agent_level', 'contract_approval_status','contract_sales_model','contract_trade_terms'],
  computed: {
    tcAgentHistory() {
      return tcAgentHistory
    },
    localLabelSuffix() {
      return localStorage.getItem('labelSuffix') || '';
    },

    showAreaColumn() {
      // VP 、总经理
      // const allowedRoles = ["sales_director", "manager"];
      // return allowedRoles.some(role => this.$store.getters.roles.includes(role));
      // 不可见的角色： 区总、销售经理、代理商经理、代理商销售、销售支持 暂不考虑多角色比如又是销售又是vp角色
      const invisibleRoles = ['area_sales_director', 'sales_manager', 'agent_manager', 'agent_sales', 'sales_support'];
      return !this.$store.getters.roles.some(role => invisibleRoles.includes(role));
    }
  },
  data() {
    return {
      statusColorMap: statusColorMap,
      // 遮罩层
      loading: true,
      pageLoading: false,
      targetLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 合同表格数据
      contractList: [],
      // 弹出层标题
      title: "",

      approveTitle:VueI18n.t('contract.approve'),
      approveOpen:false,
      approveFormRules: {

      },
      approveForm:[],
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        agentId: null,
        agentNo: null,
        agentName: null,
        areaId: null,
        countryId: null,
        city: null,
        agentType: null,
        hasContract: null,
        parentAgentId: null,
        parentSalerId: null,
        agentLevel: null,
        discount: null,
        head: null,
        phone: null,
        email: null,
        address: null,
        status: null,
        permissionChar: null,
        origin: null,
        firstCooperationYear: null,
        protocolStartDate: null,
        protocolEndDate: null,
        authorizedArea: null
      },
      curCountryOps: [],
      // 区域tree
      areaTree: [],
      // 区域选项
      areaOptions: [],
      // 快速查询
      areaMap: new Map(),
      // 上级销售选项
      salesOptions: [],
      // 上级代理选项
      agentOptions: [],
      //区域
      areaList: [],
      //代理商
      curAgentOps:[],
      //业务员
      ownerList: [],
      agentFlag:false,
    };
  },
  created() {
    console.log("this.$route.query=========>",this.$route.query)
    this.getArea();
    this.curCountry()
    this.getAreaList()
    this.curAgent()
    this.getAllOwnerList()
    this.getList();
    this.agentFlag = this.$store.state.user.userInfo.deptId !== 0
  },
  activated() {
    this.getList();
  },
  methods: {
    // value 转 label
    convertStatus(status) {
      if (!status) return "-";
      const check = this.dict.type.audit_status.filter(
        (item) => item.value == status
      );
      if (check && check.length > 0) {
        return check[0].label;
      } else {
        return "-";
      }
    },
    /** 查询客户所有人列表 */
    getAllOwnerList() {
      getAllOwnerList({onlySalesRole: false}).then(res => {
        this.ownerList = res.data;
      })
      //将超级管理员的账号添加
      getAuthRole(1).then(response => {
        this.ownerList.push(response.user)
      })
    },
    //获取代理商
    async curAgent() {
      const response = await curAgent()
      response.data.forEach(item => {
        this.curAgentOps.push({
          label: item['ownerAgentName' + this.localLabelSuffix],
          value: parseInt(item.ownerAgent)
        })
      })
      // 如果存在 ownerAgent =0，则添加总部选项
      this.curAgentOps.unshift({value: 0, label: this.$t('agent.headquarters')})
    },
    // 获取区域
    getAreaList() {
      this.areaList = []
      getAllAreaList().then(response => {
        if (response.data) {
          response.data.forEach(item => {
            this.areaList.push({
              label: item['areaName' + this.localLabelSuffix],
              value: parseInt(item.areaId)
            })
          })
        }
      });
    },
    /** 查询代理商档案列表 */
    async getList() {
      this.loading = true;
      this.$set(this.queryParams,'nickName',this.queryParams.salesman)
      this.$set(this.queryParams,'salesman',null)
      const { ...params} = this.queryParams;

      try {
        const response = await listContractBo(params);
        this.contractList = response.rows;
        this.queryParams.total = response.total;
      } finally {
        this.loading = false;
      }
      this.$set(this.queryParams,'salesman',this.queryParams.nickName)
    },


    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 todo:待补充*/
    resetQuery() {
      this.$set(this.queryParams, 'agentLevelName', null)
      this.$set(this.queryParams, 'agentTypeName', null)
      this.$set(this.queryParams, 'contractNo', null)
      this.$set(this.queryParams, 'contractName', null)
      this.$set(this.queryParams, 'contractCustomer', null)
      this.$set(this.queryParams, 'versionNo', null)
      this.$set(this.queryParams, 'salesman', null)
      this.$set(this.queryParams, 'endCustomers', null)
      this.$set(this.queryParams, 'tradeTerms', null)
      this.$set(this.queryParams, 'salesModel', null)
      this.$set(this.queryParams, 'approveStatus', null)
      this.$set(this.queryParams, 'areaId', null)
      this.$set(this.queryParams, 'countryId', null)
      this.$set(this.queryParams, 'city', null)
      this.$set(this.queryParams, 'agentName', null)
      this.$set(this.queryParams, 'endCustomersName', null)
      this.$set(this.queryParams, 'agentId', null)
      this.$set(this.queryParams, 'countries', null)
      this.$set(this.queryParams, 'origins', null)

      this.$set(this.queryParams, 'address', null)
      this.$set(this.queryParams, 'telephone', null)
      this.$set(this.queryParams, 'email', null)
      this.$set(this.queryParams, 'shippingMark', null)
      this.$set(this.queryParams, 'shipmentPort', null)
      this.$set(this.queryParams, 'destinationPort', null)
      this.$set(this.queryParams, 'shipmentDeadline', null)

      this.$set(this.queryParams, 'flowStatus', null)



      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$tab.openPage(this.$t('contract.contract')+this.$t('common.add'), '/contract-edit/index/0', {type: 'add'});
    },
    /** 导出按钮操作 */
    handleExport() {
      //单选情况下   只导出选中行的合同
      if(this.ids && this.ids.length > 1){
        this.$message.error("请勿选择过多行的数据！")
      }
      if(this.ids && this.ids.length === 1){
        let fileName = this.$t('contract.contract') + parseTime(new Date(), '{y}{m}{d}') + '.docx'
        this.download("/business/contract/exportContract/" + this.ids, {}, fileName)
        this.$message.success("合同已生成")
      }
      if(this.ids && this.ids.length === 0){
        this.download('business/contract/export', {
          ...this.queryParams
        }, `contract_${new Date().getTime()}.xlsx`)
      }
    },

    sortChange({column, prop, order}) {
      if (order === 'ascending') {
        this.queryParams.orderByColumn = prop;
        this.queryParams.isAsc = 'asc';
      } else if (order === 'descending') {
        this.queryParams.orderByColumn = prop;
        this.queryParams.isAsc = 'desc';
      } else {
        this.queryParams.orderByColumn = null;
        this.queryParams.isAsc = null;
      }
      this.getList();
    },
    getAgentName(areaId) {
      if (areaId !== null && areaId !== undefined && areaId >= 0) {
        const area = this.areaMap.get(areaId);
        if (area) {
          return area['areaName' + this.localLabelSuffix]
        }
      }
      return '-'
    },
    checkRole,

    // 下拉
    async getArea() {
      try {
        const response = await getArea();
        this.areaOptions = response.data;
        this.areaMap = response.data.reduce((map, obj) => {
          map.set(obj.areaId, obj);
          return map;
        }, new Map());
      } catch (e) {
      }
    },
    // tree
    async getAreaTree() {
      const response = await getAreaTreeByUser()
      this.areaTree = response.data
      // console.log('allAreaList', this.areaTree)
      // 如果存在全球根节点（id=0），则排除根节点
      this.areaTree = this.areaTree.filter(item => item.id !== 0)

    },
    //获取国家
    async curCountry() {
      const response = await getAllNationNeedLanguageList(this.$i18n.locale)
      response.data.forEach(item=>{
        this.curCountryOps.push({
          label: item.countryName,
          value: parseInt(item.countryId)
        })
      })
      console.log("this.curCountryOps==============>",this.curCountryOps)
    },
    //查看合同
    handleView(row){
      this.$tab.openPage(this.$t('contract.view')+this.$t('common.add'), '/contract-edit/index/' + row.id, {type: 'view'});
    },
    //编辑合同
    handleEdit(row){
      this.$tab.openPage(this.$t('contract.edit')+this.$t('common.add'), '/contract-edit/index/' + row.id, {type: 'edit'});
    },
    //合同删除
    handleDelete(row){
      const ids = row.id || this.ids;
      this.$modal.confirm(this.$t('common.isDelete')).then(function() {
        return delContract(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(this.$t('common.deleteSuccess'));
      }).catch(() => {});
    },
    //打开审批按钮
    handleApprove(row){
      this.approveForm = []
      getContractById(row.id).then(response => {
        this.approveForm = response.data;
      })
      this.approveOpen = true
    },
    handleAmendment(row){
      this.$tab.openPage(this.$t('contract.amendment')+this.$t('common.add'), '/contract-edit/index/' + row.id, {type: 'amendment'});
    },
    handleToVoid(row){
      this.$tab.openPage(this.$t('contract.amendment')+this.$t('common.add'), '/contract-edit/index/' + row.id, {type: 'toVoid'});
    },

    //操作按钮多选
    handleCommand(command, row) {
      switch (command) {
        case "edit":
          this.handleEdit(row)
          break;
        case "delete":
          this.handleDelete(row)
          break;
        case "cancel":
          this.handleCancel(row)
          break;
        case "approve":
          this.handleApprove(row)
          break;
        case "amendment":
          this.handleAmendment(row)
          break;
        case "toVoid":
          this.handleToVoid(row)
          break;
      }
    },

    getNickName(userId){
       const nickName = this.ownerList.find(item => item.userId === userId);
       return nickName ? nickName.nickName : '';
    },
    //撤销数据
    async handleCancel(row){
      let bargainObj = {
      }
      let auditForm = {
        // 审批流
        auditFlow: row.paymentMethod === '1' || row.paymentRatio !=='1' ? 3 :4,
        // 业务id  报价id
        businessId: row.id,
        // 审批结果
        status: 40,
        // 备注
        remark: row.contractName+'合同已撤回',
        // 业务参数
        businessObj: bargainObj
      }
      const response = await rollback(auditForm)
      if(response && response.code == 200){
        //合同状态变为已取消
        updateContract({id:row.id,approveStatus:'3'}).then(res=>{
          if(res && res.code == 200){
            this.$message.success("合同取消成功")
            this.getList()
          }
        })
      }

    },
    //审核通过
    async approveYes(){
      this.$set(this.approveForm,"approveStatus","2")
      let bargainObj = {
        paymentMethod:this.approveForm.paymentMethod,
        paymentRatio:this.approveForm.paymentRatio
      }

      let auditForm = {
        // 审批流
        auditFlow: this.approveForm.paymentMethod === '1' || this.approveForm.paymentRatio !=='1' ? 3 :4,
        // 业务id  报价id
        businessId: this.approveForm.id,
        // 审批结果
        status: 200,
        // 备注
        remark: this.approveForm.approveRemark,
        // 业务参数
        businessObj: bargainObj
      }
      const response  = await audit(auditForm)
      if(response && response.code == 200){
        const res = await editFlow({...this.approveForm})
        if(res && res.code == 200){
          this.$message.success(this.$t('common.operateSuccess'))
        }else{
          this.$message.error("操作失败")
        }
      }
      await this.getList()
      this.approveOpen = false

    },
    //审核驳回
    async approveNo(){
      this.$set(this.approveForm,"approveStatus","1")
      let bargainObj = {}
      let auditForm = {
        // 审批流
        auditFlow:this.approveForm.paymentMethod === '1' || this.approveForm.paymentRatio !=='1' ? 3 :4,
        // 业务id  报价id
        businessId: this.approveForm.id,
        // 审批结果
        status: 30,
        // 备注
        remark: this.approveForm.approveRemark,
        // 业务参数
        businessObj: bargainObj
      }
      const response  = await audit(auditForm)
      if(response && response.code == 200){
        const res = await updateContract({...this.approveForm})
        if(res && res.code == 200){
          this.$message.success(this.$t('common.operateSuccess'))
          this.approveOpen = false
        }else{
          this.$message.error("操作失败")
        }
      }
      await this.getList()
      this.approveOpen = false
    },
    approveCancel(){
      this.approveOpen = false
    },
    hasPermission(row){
      // let flag = true;
      //销售VP角色，可以任意操作
      return row.salesman === this.$store.getters.userId;
      //return true

      // let permissionArray = this.permissionChar.split(',');
      // let rowPermissionArray = row.permissionChar.split(',');
      // for (let i = 0; i < rowPermissionArray.length; i++) {
      //     if (!permissionArray.includes(rowPermissionArray[i])) {
      //         flag = false;
      //         break;
      //     }
      // }
      // return flag;
    },
    hasPermissionApprove(row){
      const visibleRoles = ['area_sales_director', 'sales_manager', 'sales_director','finances'];
      // return !this.$store.getters.roles.some(role => invisibleRoles.includes(role));
      return row.salesman !== this.$store.getters.userId && this.$store.getters.roles.some(role => visibleRoles.includes(role))
    }

  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
::v-deep .edit-dialog {
  .el-dialog__body {
    min-height: 50vh;
    max-height: 75vh;
    overflow: auto;
    padding: 30px 50px;
  }

  .el-dialog__footer {
    padding: 10px 50px 20px 50px;
  }

  .el-form-item--medium .el-form-item__content, .el-form-item--medium .el-form-item__label {
    line-height: 25px;
  }

  .el-form--label-top .el-form-item__label {
    padding: 0;
  }

  .el-form .el-row:last-child .el-form-item {
    margin-bottom: 0;
  }
  .vue-treeselect .vue-treeselect__control {
    padding: 0 10px;
  }
}
</style>

