<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2023-02-23 15:59:57
-->
<template>
  <div class="page">
    <div class="main">
      <div class="tit">主表</div>
      <div class="xian"></div>
      <el-form :model="ruleForm"
               :rules="rules"
               ref="ruleForm"
               class="formStyle"
               label-width="auto">
        <el-row>
          <el-col :span="4">
            <el-form-item label="库管员"
                          prop="pkWhsmanager">
              <el-select clearable
                         v-model="ruleForm.pkWhsmanager"
                         :placeholder="'请选择'">
                <el-option v-for="(item, index) in userAllList"
                           :key="index"
                           :label="item.nickName"
                           :value="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="调整人"
                          prop="pkAdjustor">
              <el-select clearable
                         v-model="ruleForm.pkAdjustor"
                         :placeholder="'请选择'">
                <el-option v-for="(item, index) in userAllList"
                           :key="index"
                           :label="item.nickName"
                           :value="item.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="库存公司"
                          prop="pkCorp">
              <el-select clearable
                         @change="getStore"
                         v-model="ruleForm.pkCorp"
                         :placeholder="'请选择'">
                <el-option v-for="(item, index) in corpList"
                           :key="index"
                           :label="item.corpName"
                           :value="item.pkId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="仓库"
                          prop="pkWarehouse">
              <el-select clearable
                         @change="getNumList"
                         v-model="ruleForm.pkWarehouse">
                <el-option v-for="item in storeList"
                           :key="item.pkId"
                           :label="item.name"
                           :value="item.pkId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="盘点类型"
                          prop="invType">
              <el-select clearable
                         @change="setIsDis"
                         v-model="ruleForm.invType">
                <el-option v-for="item in inTypeList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="订单日期"
                          prop="orderDate">
              <el-date-picker v-model="ruleForm.orderDate"
                              value-format="yyyy-MM-dd"
                              type="date">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="备注">
              <el-input clearable
                        v-model="ruleForm.remark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="tit">列表</div>
        <div class="xian"></div>
        <div v-for="(foremed,index) in ruleForm.inventoryBiParamList"
             :key="index"
             class="rowEd">
          <el-row>
            <el-col :span="4">
              <el-form-item label="现存量">
                <el-select clearable
                           @change="getNumData($event,index)"
                           v-model="foremed.pkOnhandnum">
                  <el-option v-for="item in numList"
                             :key="item.pkId"
                             :label="item.productName"
                             :value="item.pkId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="产品编号"
                            :prop="`inventoryBiParamList.${index}.productCode`"
                            :rules="rules.productCode">
                <el-input clearable
                          :disabled="foremed.isDis"
                          @focus="getProduct(index)"
                          v-model="foremed.productCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="产品名称">
                <el-input clearable
                          disabled
                          v-model="foremed.productName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="产品规格">
                <el-input clearable
                          disabled
                          v-model="foremed.specsName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item :label="'单位'">
                <el-select clearable
                           :disabled="foremed.isDis"
                           v-model="foremed.pkUnit">
                  <el-option v-for="item in dwList"
                             :key="item.pkId"
                             :label="item.name"
                             :value="item.pkId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="4">
              <el-form-item label="供应商">
                <el-select clearable
                           :disabled="foremed.isDis"
                           v-model="foremed.pkCubasdoc"
                           :placeholder="'请选择'">
                  <el-option v-for="(item, index) in supplierList"
                             :key="index"
                             :label="item.custName"
                             :value="item.pkSupplier"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="4">
              <el-form-item label="批次号">
                <el-select clearable
                           @change="getBatchData($event,index)"
                           :disabled="foremed.isDis"
                           v-model="foremed.pkBatchCode">
                  <el-option v-for="item in foremed.pkBatchCodeList"
                             :key="item.pkId"
                             :label="item.batchCode"
                             :value="item.pkId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="账面数量">
                <el-input clearable
                          :disabled="foremed.isDis"
                          v-model="foremed.nonhandnum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="调整数量"
                            :prop="`inventoryBiParamList.${index}.nadjustnum`"
                            :rules="rules.nadjustnum">
                <el-input clearable
                          type="number"
                          @blur="setNum(index)"
                          v-model="foremed.nadjustnum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="差异数量"
                            :prop="`inventoryBiParamList.${index}.ndiffastnum`"
                            :rules="rules.ndiffastnum">
                <el-input clearable
                          disabled
                          v-model="foremed.ndiffastnum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="生产日期">
                <el-date-picker v-model="foremed.productDate"
                                disabled
                                value-format="yyyy-MM-dd"
                                type="date">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="失效日期">
                <el-date-picker v-model="foremed.expireDate"
                                disabled
                                value-format="yyyy-MM-dd"
                                type="date">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="img">
            <img src="@/assets/images/iconpop.png"
                 @click="reduceProduct(index)"
                 alt="">
          </div>
        </div>
      </el-form>
      <div class="img1">
        <img src="@/assets/images/iconadd.png"
             @click="addNewGoods"
             alt="">
      </div>
    </div>
    <div class="footer">
      <!-- <el-button size="small"
                 class="cancelBtn"> {{ '取消' }}</el-button> -->
      <el-button size="small"
                 @click="submit('ruleForm')"
                 class="sureBtn"> {{ '确认' }}</el-button>
    </div>
    <!-- 产品弹框 -->
    <el-dialog :title="'添加'"
               :visible.sync="dialogVisible"
               :close-on-click-modal="false"
               width="50%"
               center
               :before-close="handleClose">
      <div class="cpHeight">
        <el-row>
          <el-col :span="22"> <el-input v-model="select.query"
                      clearable
                      :placeholder="'请输入'"
                      @keyup.enter.native="getDataList"
                      prefix-icon="el-icon-search"></el-input>
          </el-col>
          <el-col :span="2">
            <el-button type="primary"
                       size="small"
                       @click="getDataList"> {{ '搜索' }}</el-button>
          </el-col>
        </el-row>
        <div style="height:10px"></div>
        <el-table :data="dialogList"
                  ref="multipleTable"
                  style="width: 100%"
                  @select-all="onSelectAll"
                  @select="selected"
                  :header-cell-style="{ background: '#EEEEEE' }"
                  :row-class-name="tableRowClassName">
          <el-table-column type="selection"
                           :selectable="selectable"
                           width="55"> </el-table-column>
          <el-table-column align="center"
                           prop="productName"
                           :label="'产品名称'">
          </el-table-column>
          <el-table-column align="center"
                           prop="productCode"
                           :label="'产品编号'">
          </el-table-column>
          <el-table-column align="center"
                           prop="productName"
                           :label="'规格'">
            <template slot-scope="scope">
              <div class="blueCor"
                   v-show="scope.row.specsName==''||scope.row.specsName==undefined"
                   @click="selSku(scope.row.productCode,scope.$index)">{{'选择规格'}}</div>
              <div class="blueCor"
                   v-show="scope.row.specsName!=''&&scope.row.specsName!=undefined"
                   @click="selSku(scope.row.productCode,scope.$index)">{{ scope.row.specsName }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center"
                           prop="unitStr"
                           :label="'单位'">
          </el-table-column>
          <el-table-column align="center"
                           prop="productName"
                           :label="'商品数量'">
            <template slot-scope="scope">
              <el-input-number size="mini"
                               v-model="scope.row.quantity"
                               :min="1"></el-input-number>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="queryParams.pageNum"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getDataList" />
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="handleClose">{{'取消'}}</el-button>
        <el-button type="primary"
                   @click="sureProduct">{{'确认'}}</el-button>
      </span>
    </el-dialog>
    <!-- 规格弹框 -->
    <el-dialog :title="'规格'"
               :visible.sync="ggVisible"
               :close-on-click-modal="false"
               width="40%"
               center
               :before-close="handleCloseGg">
      <el-form>
        <el-form-item :label="item.specsTypeName"
                      v-for="item,index in skuList"
                      :key="index">
          <el-radio-group v-model="item.pkProductSku">
            <el-radio v-for="ctem,cndex in item.specsList"
                      @change="getCheckBox(item.pkId,item.specsName)"
                      :key="ctem.pkSpecs"
                      :label="ctem.pkSpecs">{{ctem.name}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="handleCloseGg">{{'取消'}}</el-button>
        <el-button type="primary"
                   @click="sureSku">{{'确认'}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/supply.js'
import * as pro from '@/api/product.js'
import * as sys from '@/api/system'
import * as man from '@/api/manage'

export default {
  name: 'GiftGoodsList',
  data() {
    return {
      ruleForm: {
        inventoryBiParamList: [
          {
            pkProduct: '',
            pkBatchCode: '',
            productDate: '',
            productCode: '',
            expireDate: '',
            pkOnhandnum: '',
            pkUnit: '',
            nonhandnum: '', //账面数量
            nadjustnum: '', //调整数量
            ndiffastnum: '', //差异数量
            scmItemSpecsList: [],
            isDis: false,
          },
        ],
      },
      supplierList: [],
      productList: [],
      dwList: [],
      agreeList: [],
      storeList: [],
      dialogVisible: false,
      dialogList: [], //产品数组
      select: {},
      selectData: {},
      selIndex: 0,
      selSkuList: [],
      specsName: '',
      skuList: [],
      inTypeList: [],
      corpList: [],
      numList: [],
      userAllList: [],
      ggVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      addOrEdit: true,
      total: 0,
      showIndex: 0,
      allData: {},
      rules: {
      
        pkWhsmanager: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        invType: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        pkAdjustor: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        pkCorp: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        orderDate: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        pkWarehouse: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        productCode: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        ndiffastnum: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        nadjustnum: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        nonhandnum: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        pkUnit: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        pkStorehouse: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        pkBatchCode: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        productDate: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
        expireDate: [
          { required: true, message: '请选择', trigger: 'change' },
        ],
      },
    }
  },
  mounted() {
    if (this.$route.query.data) {
      this.allData = JSON.parse(this.$route.query.data)[0]
      this.allData.inventoryBiParamList = this.allData.inventoryBiExtList
      delete this.allData.inventoryBiExtList
      this.getStore(this.allData.pkCorp)
      this.getNumList(this.allData.pkWarehouse)
      this.ruleForm = this.allData
      this.ruleForm.inventoryBiParamList.forEach((item, index) => {
        this.getCodeList(item, index)
      })
      this.setIsDis(this.allData.invType)
      this.addOrEdit = false
    }

    this.getData()
  },
  methods: {
    getData() {
      api.supplierList().then((res) => {
        this.supplierList = res.rows
      })
      api.getEYesNoList().then((res) => {
        this.agreeList = res.data
      })
      pro.unitAll().then((res) => {
        this.dwList = res.data
      })
      api.corpList().then((res) => {
        this.corpList = res.rows
      })
      api.inventoryType().then((res) => {
        this.inTypeList = res.data
      })
      man.userAll().then((res) => {
        this.userAllList = res.data
      })
    },
    setNum(index) {
      let a =
        parseInt(this.ruleForm.inventoryBiParamList[index].nonhandnum) || 0
      let b = parseInt(this.ruleForm.inventoryBiParamList[index].nadjustnum)
      this.ruleForm.inventoryBiParamList[index].ndiffastnum =
        Math.abs(a) - Math.abs(b)
    },
    getBatchData(e, index) {
      // foremed.pkBatchCodeList
      this.ruleForm.inventoryBiParamList[index].pkBatchCodeList.forEach(
        (item) => {
          if (item.pkId == e) {
            this.ruleForm.inventoryBiParamList[index].productDate =
              item.productDate
            this.ruleForm.inventoryBiParamList[index].expireDate =
              item.expireDate
          }
        }
      )
    },
    getNumData(e, index) {
      if (e) {
        // if (this.ruleForm.invType == 1) {
        this.ruleForm.inventoryBiParamList[index].isDis = true
        // }
        this.numList.forEach((item) => {
          if (item.pkId == e) {
            this.ruleForm.inventoryBiParamList[index].productCode =
              item.productCode
            this.ruleForm.inventoryBiParamList[index].pkProduct = item.pkProduct
            this.ruleForm.inventoryBiParamList[index].productName =
              item.productName
            this.ruleForm.inventoryBiParamList[index].specsName = item.specsName
            this.ruleForm.inventoryBiParamList[index].pkUnit = item.pkUnit
            // this.ruleForm.inventoryBiParamList[index].pkCubasdoc =
            //   item.pkCubasdoc
            this.ruleForm.inventoryBiParamList[index].pkBatchCode =
              item.pkBatchCode
            this.ruleForm.inventoryBiParamList[index].nonhandnum =
              item.nonhandnum
            this.ruleForm.inventoryBiParamList[index].productDate =
              item.productDate
            this.ruleForm.inventoryBiParamList[index].expireDate =
              item.expireDate
            this.getCodeList(item, index)
          }
        })
      } else {
        this.ruleForm.inventoryBiParamList[index].isDis = false
        this.ruleForm.inventoryBiParamList[index].productCode = ''
        this.ruleForm.inventoryBiParamList[index].productName = ''
        this.ruleForm.inventoryBiParamList[index].specsName = ''
        this.ruleForm.inventoryBiParamList[index].pkUnit = ''
        // this.ruleForm.inventoryBiParamList[index].pkCubasdoc = ''
        this.ruleForm.inventoryBiParamList[index].pkBatchCode = ''
        this.ruleForm.inventoryBiParamList[index].nonhandnum = ''
        this.ruleForm.inventoryBiParamList[index].productDate = ''
        this.ruleForm.inventoryBiParamList[index].expireDate = ''
        this.$refs.ruleForm.clearValidate()
      }
    },
    setIsDis(e) {
      if (e == 1) {
        this.ruleForm.inventoryBiParamList.forEach((item) => {
          item.isDis = true
        })
      } else {
        this.ruleForm.inventoryBiParamList.forEach((item) => {
          if (item.pkOnhandnum == '' || item.pkOnhandnum == undefined) {
            item.isDis = false
          }
        })
      }
    },
    getCodeList(item, index) {
      api
        .batchRefer({
          pkProduct: item.pkProduct,
        })
        .then((res) => {
          this.$nextTick(() => {
            this.$set(
              this.ruleForm.inventoryBiParamList[index],
              'pkBatchCodeList',
              res.rows
            )
          })
        })
    },
    getNumList(e) {
      if (e) {
        api
          .handNumList({
            pkStorehouse: e,
          })
          .then((res) => {
            // this.numList = res.rows
            this.$set(this, 'numList', res.rows)
          })
      }
    },
    getStore(e) {
      if (e) {
        api
          .getStoreRefer({
            pkCorp: e,
          })
          .then((res) => {
            this.storeList = res.rows
          })
      }
    },
    selectable(row) {
      if (row.specsName == '' || row.specsName == undefined) {
        return false //禁用
      } else {
        return true //可选
      }
    },
    getDataList() {
      api
        .productFind(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          res.rows.forEach((item) => {
            item.quantity = 1
          })
          this.dialogList = res.rows
          this.total = res.total
        })
    },
    getProduct(index) {
      this.showIndex = index
      this.getDataList()
      this.dialogVisible = true
    },
    reduceProduct(index) {
      this.ruleForm.inventoryBiParamList.splice(index, 1)
    },
    addNewGoods() {
      let a = false
      if (this.ruleForm.invType == 1) {
        a = true
      }
      this.ruleForm.inventoryBiParamList.push({
        pkProduct: '',
        // pkCubasdoc: '',
        pkBatchCode: '',
        productDate: '',
        productCode: '',
        expireDate: '',
        pkOnhandnum: '',
        pkUnit: '',
        nonhandnum: '', //账面数量
        nadjustnum: '', //调整数量
        ndiffastnum: '', //差异数量
        scmItemSpecsList: [],
        isDis: a,
      })
      this.$forceUpdate()
    },
    handleCloseGg() {
      this.ggVisible = false
    },
    selSku(productCode, index) {
      this.selIndex = index
      api
        .productFindInfo({
          productCode: productCode,
        })
        .then((res) => {
          let arr1 = [],
            arr2 = []
          res.data.productBasSpecsList.forEach((item) => {
            item.pkProductSku = item.specsList[0].pkSpecs
            arr1.push({
              pkSpecs: item.specsList[0].pkSpecs,
              pkSpecsType: item.pkSpecsType,
            })
            arr2.push(item.specsList[0].name)
          })
          this.selSkuList = arr1
          this.specsName = arr2.join(',')

          this.skuList = res.data.productBasSpecsList
          this.ggVisible = true
        })
    },
    getCheckBox() {
      let arr1 = [],
        arr2 = []
      this.skuList.forEach((item) => {
        item.specsList.forEach((ctem) => {
          if (ctem.pkSpecs == item.pkProductSku) {
            arr1.push({
              pkSpecs: ctem.pkSpecs,
              pkSpecsType: item.pkSpecsType,
            })
            arr2.push(ctem.name)
          }
        })
      })
      this.selSkuList = arr1
      this.specsName = arr2.join(',')
    },
    handleClose() {
      this.selectData = []
      this.dialogVisible = false
    },
    onSelectAll() {
      this.$refs.multipleTable.clearSelection()
    },
    selected(selection, row) {
      this.$refs.multipleTable.clearSelection()
      if (selection.length == 0) return
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.selectData = row
    },
    sureProduct() {
      if (this.selectData.length == 0) {
        this.$message({
          message: '请选择产品',
          type: 'warning',
        })
        return false
      } else {
        this.ruleForm.inventoryBiParamList[this.showIndex].productCode =
          this.selectData.productCode
        this.ruleForm.inventoryBiParamList[this.showIndex].pkProduct =
          this.selectData.pkProduct
        this.ruleForm.inventoryBiParamList[this.showIndex].productName =
          this.selectData.productName
        this.ruleForm.inventoryBiParamList[this.showIndex].specsName =
          this.selectData.specsName
        this.ruleForm.inventoryBiParamList[this.showIndex].pkUnit =
          this.selectData.unit
        this.ruleForm.inventoryBiParamList[this.showIndex].nnum =
          this.selectData.quantity
        this.ruleForm.inventoryBiParamList[this.showIndex].scmItemSpecsList =
          this.selectData.selSkuList
        this.handleClose()
        this.getCodeList(
          this.ruleForm.inventoryBiParamList[this.showIndex],
          this.showIndex
        )
        this.$forceUpdate()
      }
    },
    sureSku() {
      this.$set(this.dialogList[this.selIndex], 'selSkuList', this.selSkuList)
      this.$set(this.dialogList[this.selIndex], 'specsName', this.specsName)
      this.ggVisible = false
    },
    submit() {
      let arr = this.ruleForm.inventoryBiParamList
      for (let i = 0; i < arr.length; i++) {
        if (this.ruleForm.invType == 1) {
          if (parseInt(arr[i].nadjustnum) >= parseInt(arr[i].nonhandnum)) {
            this.$message({
              message: '盘亏时，调整数量必须小于账面数量',
              type: 'warning',
            })
            return false
          }
        }
        if (this.ruleForm.invType == 2) {
          if (parseInt(arr[i].nonhandnum) >= parseInt(arr[i].nadjustnum)) {
            this.$message({
              message: '盘盈时，调整数量必须大于账面数量',
              type: 'warning',
            })
            return false
          }
        }
      }
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let url
          if (this.addOrEdit) {
            url = api.inventoryAdd
          } else {
            url = api.inventoryUpdate
          }
          url(this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success',
              })
              this.$router.go(-1)
            }
          })
        }
      })
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    },
  },
}
</script>

<style lang="scss" scoped>
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main_a {
    height: calc(100vh - 144px);
    display: flex;
    flex-direction: column;
  }
  .main {
    background: #ffffff;
    border-radius: 8px;
    // height: calc(100vh - 124px);
    box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
    overflow-x: hidden;
  }
  ::v-deep .el-select {
    width: 100%;
  }
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
.tit {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  padding: 0 20px;
  border-left: 5px solid #c8161d;
  margin: 20px 0 10px 0;
}
.xian {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
.demo-ruleForm {
  padding: 10px 0px;
}
::v-deep .el-date-editor--datetimerange {
  width: auto !important;
}
.flexed {
  display: flex;
}
.flexed_l {
  margin-right: 20px;
}
.topbox {
  align-items: center;
  padding: 0px 0 15px 0;
  display: flex;
  //   background: skyblue;
  .levelList_i {
    margin-left: 20px;
    position: relative;
    cursor: pointer;
    padding: 0 5px;
    width: 88px;
    height: 34px;
    border-radius: 17px;
    border: 1px solid #cccccc;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: center;
    line-height: 32px;
  }
  .act {
    color: #ffffff;
    background: #c8161d;
  }
}
::v-deep .el-form-item {
  margin-bottom: 20px !important;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100% !important;
}
.blueCor {
  color: #589ff8;
  cursor: pointer;
}
::v-deep .el-input__icon {
  line-height: 33px;
}
::v-deep .el-button {
  margin-top: 0;
}
.formStyle {
  padding-right: 10px;
}
.rowEd {
  border-bottom: 5px solid rgba(0, 0, 0, 0.1);
  margin: 10px 0;
}
.img {
  text-align: center;
  margin-bottom: 10px;
  img {
    width: 25px;
    height: 25px;
  }
}
.img1 {
  text-align: center;
  padding-right: 10px;
  img {
    width: 25px;
    height: 25px;
  }
}
</style>
