<template>
  <div class="index-inner">
    <el-form
      style="padding: 20px; width: 100%; box-sizing: border-box"
      :model="form"
      label-width="110px"
      data-vv-scope="taskManageForm"
      ref="taskManageForm"
      :rules="rules"
    >
      <el-collapse
        v-model="activeNames"
        style="width: 100%; box-sizing: border-box"
      >
        <el-collapse-item name="1">
          <template slot="title">
            <span class="tip"></span>创建养护工单
          </template>
          <el-card>
            <el-row>
              <el-col :span="12">
                <el-form-item label="工单号" prop="jobNumber">
                  <el-input
                    v-model="form.jobNumber"
                    disabled
                    placeholder="由后台生成"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工单类型" prop="type">
                  <!-- <el-input v-model="form.type"></el-input> -->
                  <dict-select
                    dictCode="yhgd-gdlx"
                    :hasDefaultOption="true"
                    clearable
                    @input="(val, obj) => handleDict(val, obj, 'yhgd-gdlx')"
                    v-model="form.type"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="路段" prop="roadSegmentId">
                  <!-- <el-input v-model="form.roadSegmentId"></el-input> -->
                  <sction-info-selector
                    v-model="form.roadSegmentName"
                    :value="form.roadSegmentName"
                    @changed="changed"
                    @value="value"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="施工单位" prop="companyName">
                  <!-- <el-input v-model="form.responsiblePerson"></el-input> -->
                  <company-info-selector
                    v-model="form.companyName"
                    :valueName="form.companyIds"
                    @handleChanged="handleChanged"
                    @value="companyValue"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="位置" prop="position">
                  <el-input v-model="form.position"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同" prop="contractNumber">
                  <!-- <el-input v-model="form.contractId"></el-input> -->
                  <el-select
                    v-model="form.contractNumber"
                    placeholder="请选择合同"
                    style="width: 100%"
                    @change="contractChange"
                  >
                    <el-option
                      v-for="item in contractInfoList"
                      :value="item.contractNumber"
                      :label="item.name"
                      :key="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="类别" prop="typeValue">
                  <!-- <el-input v-model="form.typeValue"></el-input> -->
                  <el-select
                    v-model="form.typeValue"
                    placeholder="请选择"
                    @change="changesele"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="细目" prop="detailsId">
                  <!-- <el-input v-model="form.detailsId"></el-input> -->
                  <el-select
                    v-model="form.detailsId"
                    placeholder="请选择"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in cbkm"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="要求修复时间" prop="demandFinishTime">
                  <!-- <el-input v-model="form.demandFinishTime"></el-input> -->
                  <el-date-picker
                    v-model="form.demandFinishTime"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="签发人" prop="issuer">
                  <el-input v-model="form.issuer"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="签发日期" prop="issueDate">
                  <!-- <el-input v-model="form.issueDate"></el-input> -->
                  <el-date-picker
                    v-model="form.issueDate"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态" prop="statusValue">
                  <el-input v-model="form.statusValue"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="任务内容" prop="taskContent">
                  <el-input
                    v-model="form.taskContent"
                    type="textarea"
                    rows="3"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="关联病害" prop="description">
                  <el-input
                    v-model="form.description"
                    placeholder="选择关联病害"
                    ref="diseaseName"
                    @focus="handleFocusDisease"
                    clearable
                  >
                    <el-button
                      type="primary"
                      @click="openDisease"
                      slot="append"
                      icon="el-icon-search"
                    ></el-button>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title"> <span class="tip"></span>关联病害 </template>
          <el-card>
            <el-row>
              <el-col :span="12">
                <el-form-item label="巡检类别" prop="typeName">
                  <el-input v-model="form.typeName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="方向" prop="directionName">
                  <el-input v-model="form.directionName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="起点桩号" prop="startPeg">
                  <el-input v-model="form.startPeg"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="止点桩号" prop="endPeg">
                  <el-input v-model="form.endPeg"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="类别" prop="subjectName">
                  <el-input v-model="form.subjectName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="细目" prop="dsubjectName">
                  <el-input v-model="form.dsubjectName"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="病害部位" prop="positionName">
                  <el-input v-model="form.positionName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="处理情况" prop="handlingSituation">
                  <el-input v-model="form.handlingSituation"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="病害描述" prop="description">
                  <el-input v-model="form.description"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="病害 长(mm)" prop="paramLength">
                  <el-input v-model="form.paramLength"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="病害 宽(mm)" prop="paramWidth">
                  <el-input v-model="form.paramWidth"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="病害 高(mm)" prop="paramHeight">
                  <el-input v-model="form.paramHeight"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <!-- <el-col :span='12'>
                <el-form-item
                  label="病害照片列表"
                  prop="name"
                >

                </el-form-item>
              </el-col> -->
            </el-row>
          </el-card>
        </el-collapse-item>
        <el-collapse-item name="3">
          <template slot="title"> <span class="tip"></span>施工填报 </template>
          <el-card>
            <el-row>
              <el-col :span="12">
                <el-form-item label="施工照片" prop="name"> </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="起点桩号" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="止点桩号" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="现场负责人" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="亮工时间" prop="name">
                  <el-input v-model="form.name"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="施工描述" prop="name">
                  <el-input
                    v-model="form.name"
                    type="textarea"
                    rows="3"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-collapse-item>
        <el-collapse-item
          name="4"
          style="max-width: 100%; box-sizing: border-box"
        >
          <template slot="title">
            <span class="tip"></span>关联信息、工程量清单
          </template>
          <el-card style="max-width: 100%; box-sizing: border-box">
            <el-button
              type="primary"
              @click="addListItem"
              style="margin-bottom: 20px"
              icon="el-icon-plus"
            >
              添加</el-button
            >

            <el-table
              :data="tableData"
              border
              stripe
              style="max-width: 100%; min-width: 100%"
              max-height="360"
            >
              <el-table-column
                prop="subjectName"
                label="课目名称"
                min-width="130"
                fixed="left"
              >
                <template slot-scope="scope">
                  <el-input
                    readonly
                    :disabled="currentNode == 4"
                    v-model="scope.row.subjectName"
                    suffix-icon="el-icon-search"
                    @focus="searchSubject(scope.$index)"
                  >
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="fineSubjectName"
                label="细课目名称"
                min-width="130"
                fixed="left"
                ><template slot-scope="scope">
                  <el-input
                    disabled
                    v-model="scope.row.fineSubjectName"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="spec" label="单位" min-width="130">
                <template slot-scope="scope">
                  <el-input disabled v-model="scope.row.spec"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="单价(元)" min-width="130">
                <template slot-scope="scope">
                  <el-input-number
                    disabled
                    :min="0"
                    :precision="2"
                    class="input-number"
                    :controls="false"
                    v-model="scope.row.price"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="amount" label="数量" min-width="130">
                <template slot-scope="scope">
                  <el-input-number
                    :min="0"
                    class="input-number"
                    controls-position="right"
                    v-model="scope.row.amount"
                    @change="val => changeAmount(val, scope.$index)"
                  >
                  </el-input-number>
                </template>
              </el-table-column>
              <el-table-column prop="money" label="金额(元)" min-width="140">
                <template slot-scope="scope">
                  <el-input-number
                    disabled
                    :min="0"
                    :precision="2"
                    class="input-number"
                    :controls="false"
                    v-model="scope.row.money"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                prop="auditPrice"
                label="审核单价(元)"
                min-width="130"
              >
                <template slot-scope="scope">
                  <el-input-number
                    :disabled="currentNode == 3"
                    :min="0"
                    :precision="2"
                    class="input-number"
                    :controls="false"
                    v-model="scope.row.auditPrice"
                    @change="
                      val =>
                        changeColNum(
                          val,
                          scope.$index,
                          'auditPrice',
                          'auditAmount',
                          'auditMoney'
                        )
                    "
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                prop="auditAmount"
                label="审核数量"
                min-width="130"
              >
                <template slot-scope="scope">
                  <el-input-number
                    :disabled="currentNode == 3"
                    :min="0"
                    class="input-number"
                    controls-position="right"
                    v-model="scope.row.auditAmount"
                    @change="
                      val =>
                        changeColNum(
                          val,
                          scope.$index,
                          'auditAmount',
                          'auditPrice',
                          'auditMoney'
                        )
                    "
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                prop="auditMoney"
                label="审核金额(元)"
                min-width="140"
              >
                <template slot-scope="scope">
                  <el-input-number
                    disabled
                    :min="0"
                    :precision="2"
                    class="input-number"
                    :controls="false"
                    v-model="scope.row.auditMoney"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                prop="receiverPrice"
                label="收方单价"
                min-width="130"
              >
                <template slot-scope="scope">
                  <el-input-number
                    :disabled="currentNode == 3"
                    :min="0"
                    :precision="2"
                    class="input-number"
                    :controls="false"
                    v-model="scope.row.receiverPrice"
                    @change="
                      val =>
                        changeColNum(
                          val,
                          scope.$index,
                          'receiverPrice',
                          'receiverAmount',
                          'receiverMoney'
                        )
                    "
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                prop="receiverAmount"
                label="收方数量"
                min-width="130"
              >
                <template slot-scope="scope">
                  <el-input-number
                    :disabled="currentNode == 3"
                    :min="0"
                    class="input-number"
                    controls-position="right"
                    v-model="scope.row.receiverAmount"
                    @change="
                      val =>
                        changeColNum(
                          val,
                          scope.$index,
                          'receiverAmount',
                          'receiverPrice',
                          'receiverMoney'
                        )
                    "
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                prop="receiverMoney"
                label="收方金额(元)"
                min-width="140"
              >
                <template slot-scope="scope">
                  <el-input-number
                    disabled
                    :min="0"
                    :precision="2"
                    class="input-number"
                    :controls="false"
                    v-model="scope.row.receiverMoney"
                  ></el-input-number>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                fixed="right"
                width="80"
                align="center"
              >
                <template slot-scope="scope">
                  <el-button
                    type="danger"
                    size="small"
                    icon="el-icon-delete"
                    @click="deleteListItem(scope.$index)"
                  />
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <disease-dialog
      ref="disease"
      :single="true"
      @select="handleSelectDisease"
    ></disease-dialog>
    <selectContractDialog
      ref="selectContract"
      @change="getContractItem"
    ></selectContractDialog>
  </div>
</template>

<script>
import {helper} from '../../../public/hotent.helper.js'
import req from '@/request.js'
import utils from '@/utils'
import basicData from '@/api/basicData.js'
import routerInfoSelector from '@/components/selector/routerInfoSelector.vue'
import DiseaseDialog from '@/components/dialog/DiseaseDialog.vue'
import selectContractDialog from '@/components/flowURLForm/selectContractDialog'
import sctionInfoSelector from '@/components/selector/sctionInfoSelector.vue'
export default {
  name: 'flowInfoDailog',
  components: {
    routerInfoSelector,
    DiseaseDialog,
    selectContractDialog,
    sctionInfoSelector
  },
  data() {
    return {
      currentNode: 1,
      form: {
        type: 1, //工单类型 字典
        description: '', //病害描述
        roadSegmentId: '',
        workOrderInformation: {
          contractId: '1427556055054946304'
        }
      },
      options: [],
      cbkm: [],
      activeNames: ['1', '2', '3', '4', '5', '6'],
      tableData: [],
      contractInfoList: [], //合同信息列表
      rules: {
        type: {
          required: true,
          message: '请输入工单类型',
          trigger: 'blur'
        },
        roadSegmentId: {
          required: true,
          message: '请选择路段名称',
          trigger: 'blur'
        },
        responsiblePerson: {
          required: true,
          message: '请选择施工单位',
          trigger: 'blur'
        },
        position: {
          required: true,
          message: '请输入位置',
          trigger: 'blur'
        },
        contractId: {
          required: true,
          message: '请输入合同',
          trigger: 'blur'
        },
        typeValue: {
          required: true,
          message: '请输入类型',
          trigger: 'blur'
        },
        detailsId: {
          required: true,
          message: '请输入细目',
          trigger: 'blur'
        },
        demandFinishTime: {
          required: true,
          message: '请输入要求修复时间',
          trigger: 'blur'
        },
        issueDate: {
          required: true,
          message: '请输入签发日期',
          trigger: 'blur'
        },
        taskContent: {
          required: true,
          message: '请输入任务内容',
          trigger: 'blur'
        }
      }
    }
  },
  mounted() {
    this.currentNode = this.$route.query.node
    console.log(this.currentNode, '节点')
    const _this = this
    window.saveData = this.saveData
    this.id = utils.getUrlKey('id')
    let isEdit = utils.getUrlKey('isEdit')
    this.disabled = isEdit == 'r' ? true : false
    if (this.id) {
      req
        .get(window.context.yhxt + '/siteInspection/v1/get/' + this.id)
        .then(res => {
          if (res.data) {
            res.data.type ? (res.data.type = res.data.type + '') : null
            // _this.form = res.data
          }
        })
    }
    window.addEventListener('message', function(e) {
      if (e.data.params) {
        console.log(e.data.params, 'message-relationData')
      }
    })
  },
  created() {
    this.getTypeOptions()
    this.getContractId()
  },
  methods: {
    // 工程清单相关方法 start
    changeAmount(val, index) {
      let currentObj = this.tableData[index]
      currentObj.amount = val
      currentObj.money = currentObj.price * val
      currentObj.auditAmount = val
      currentObj.auditMoney = currentObj.price * val
      this.tableData.splice(index, 1, currentObj)
    },
    changeColNum(val, index, colums, otherCol, totalCol) {
      let currentObj = this.tableData[index]
      currentObj[colums] = val
      currentObj[totalCol] = currentObj[colums] * currentObj[otherCol]
      this.tableData.splice(index, 1, currentObj)
      console.log(this.tableData)
    },
    addListItem() {
      let length = this.tableData.length
      let workOrderInformationId =
        this.form.workOrderInformation && this.form.workOrderInformation.id
          ? this.form.workOrderInformation.id
          : ''
      let contractId =
        this.form.workOrderInformation &&
        this.form.workOrderInformation.contractId
          ? this.form.workOrderInformation.contractId
          : ''
      let newData = {
        // todo 回显时需加上工单id合同id，key
        key: length + 1,
        workOrderInformationId,
        contractId,
        subjectName: '',
        fineSubjectName: '',
        spec: '',
        price: 0,
        amount: 0,
        money: 0,
        auditPrice: 0,
        auditAmount: 0,
        auditMoney: 0,
        receiverPrice: 0,
        receiverAmount: 0,
        receiverMoney: 0
      }
      this.tableData.push(newData)
    },
    deleteListItem(index) {
      this.tableData.splice(index, 1)
    },
    searchSubject(index) {
      if (
        this.form.workOrderInformation &&
        this.form.workOrderInformation.contractId
      ) {
        this.$refs.selectContract.open(
          index,
          this.form.workOrderInformation.contractId
        )
      }
    },
    getContractItem(obj, index) {
      obj.key = index + 1
      obj.workOrderInformationId =
        this.form.workOrderInformation && this.form.workOrderInformation.id
          ? this.form.workOrderInformation.id
          : ''
      obj.auditPrice = obj.price
      this.tableData.splice(index, 1, obj)
    },
    // 工程清单相关方法 end
    handleFocusDisease() {
      this.$refs.disease.open()
    },
    openDisease() {
      this.$refs.disease.open()
    },
    //选取病害回填数据
    handleSelectDisease(data) {
      this.form.description += data.description + ';'
      // this.form.routeId = data.id
      this.$refs.diseaseName.focus()
      this.$refs.diseaseName.blur()
    },
    // //字典回调数据
    handleDict(val, obj, str) {
      if (str === 'yhgd-gdlx') {
        this.form.typeValue = obj.name
      } else if (str === 'fx') {
        this.form.directionValue = obj.name
      }
    },
    handleCancel() {
      this.$emit('handleCancel')
    },
    saveData() {
      const _this = this
      //验证表单是否填写完
      this.$refs.taskManageForm.validate(pass => {
        if (pass) {
          //请求保存提交
          console.log(this.form, 'this.form')
          this.$http
            .post(
              '${yhxt}/siteInspection/v1/saveSiteInspectionSpecial',
              this.form
            )
            .then(res => {
              if (res.data.state) {
                let params = {
                  type: 'saveData',
                  state: true,
                  businessKey: res.data.value.id,
                  sysCode: ''
                }
                // params.vars = {
                //     props1: this.forms.props1,
                // }
                hotent.sendMessage(params)
              }
            })
        }
      })
    },
    //路线信息赋值
    changed(obj) {
      // console.log(obj)
      this.form.roadSegmentName = obj.name
      this.form.roadSegmentId = obj.id
    },
    value(obj) {
      // console.log(obj)
      this.form.roadSegmentName = obj.name
      this.form.roadSegmentId = obj.id
    },
    //公司赋值
    handleChanged(obj) {
      // console.log(obj.valueInfo.join(','))
      this.form.companyIds = JSON.stringify(obj.valueInfo)
      this.form.companyName = obj.name
      this.form.companyId = obj.id
    },
    companyValue(obj) {
      // console.log(obj)
      this.form.companyName = obj.name
      this.form.companyId = obj.id
      this.form.companyIds = JSON.stringify(obj.id.split(' ')) //必须是空格
    },
    changesele(value) {
      let arr = []
      basicData.getCostAccountManagement(value).then(res => {
        if (res.data.length > 0) {
          res.data.forEach(item => {
            if (item.pcode == value) {
              arr.push({
                label: item.subjectName,
                value: item.subjectCode
              })
            }
            this.cbkm = arr
            this.form.detailsId = arr[0].label
          })
        }
      })
    },
    //获取类型数据
    getTypeOptions() {
      if (this.options.length == 0) {
        let data = 'CBKM'
        basicData.getCostAccountManagement(data).then(res => {
          res.data.forEach(item => {
            this.options.push({
              label: item.subjectName,
              value: item.subjectCode
            })
          })
        })
      }
    },
    //   //路段信息赋值
    // changed(obj) {
    //   this.form.workOrderInformation.roadSegmentName = obj.name
    //   this.form.workOrderInformation.roadSegmentId = obj.id
    // },
    // //默认赋值为第一条数据的值
    // value(obj) {
    //   this.form.workOrderInformation.roadSegmentName = obj.name
    //   this.form.workOrderInformation.roadSegmentId = obj.id
    // },
    //获取合同信息
    getContractId() {
      basicData.getContractInfo().then(res => {
        this.contractInfoList = res.rows
        this.contractInfoList.forEach(item => {
          item.name = item.contractName
        })
      })
    },
    contractChange(val) {
      this.contractInfoList.forEach(item => {
        if (item.contractNumber == val) {
          this.form.name = item.contractName
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.input-number {
  width: 100%;
}
</style>
<style lang="scss" scoped>
.index-inner {
  display: flex;
  justify-content: center;
  height: 100%;
  background-color: #fff;
}
.tip {
  display: inline-block;
  width: 6px;
  height: 16px;
  vertical-align: middle;
  margin-right: 6px;
  margin-top: 2px;
  background-color: #211bce;
}

::v-deep .el-collapse-item__header {
  // border: 0;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}

::v-deep .el-collapse {
  border: 0;
  border-top: 1px solid #fff;
}

::v-deep .el-collapse-item__content {
  padding-top: 10px;
  padding-bottom: 0;
}
.el-dialog-footer {
  padding: 10px 20px 20px;
  text-align: right;
  box-sizing: border-box;
}
</style>
