<template>
  <div class="app-container">
    <!-- 配方模板表 -->
    <div ref="template" class="template">
      <p class="recipeTemplate" />
      <div class="operation">
        <el-button class="success" @click="handleCreate">新增</el-button>
        <el-button class="danger" @click="handleDelete">删除</el-button>
        <el-button class="warning" @click="handleCopy">复制</el-button>
        <el-button class="success" @click="handleRecipeRecord">配方记录</el-button>
      </div>

      <div class="search">
        <el-select v-model="table.getdataListParm.parammaps.enable" placeholder="牲畜类别" class="filter-item" clearable>
          <el-option v-for="item in livestockTypeList" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
        <el-select v-model="table.getdataListParm.parammaps.enable" placeholder="配方类型" class="filter-item" style="width: 120px;" clearable>
          <el-option v-for="item in formulaTypeList" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
        <el-select v-model="table.getdataListParm.parammaps.enable" placeholder="是否启用" class="filter-item" style="width: 120px;" clearable>
          <el-option v-for="item in enableList" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
        <div ref="selectInput" class="filter-item selectInput">
          <el-input type="text" name="" value="" placeholder="请点击选择搜索条件" class="Input" />
          <i v-if="arrowDown" icon="el-icon-arrow-down" class="el-icon-arrow-down" />
          <i v-if="arrowUp" icon="el-icon-arrow-up" class="el-icon-arrow-up" />
          <ul v-if="arrowUp" class="selectUl">
            <li><a>模板名称</a><el-input v-model="table.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
            <li><a>制定人</a><el-input v-model="table.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
            <li><a>说明</a><el-input v-model="table.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
            <li>
              <div style="float: right;">
                <el-button class="minCancel" @click="arrowUp=false;arrowDown=true;">取消</el-button>
                <el-button class="miniSuccess" @click="handleSearch">搜索</el-button>
              </div>
            </li>
          </ul>
        </div>
        <el-button class="successBorder" @click="handleSearch">查询</el-button>
        <el-button class="successBorder" @click="handleRefresh">重置</el-button>
      </div>

      <div class="table">
        <el-table
          :key="table.tableKey"
          v-loading="table.listLoading"
          element-loading-text="给我一点时间"
          :data="table.list"
          border
          fit
          highlight-current-row
          style="width: 98%;"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          class="elTable table-fixed"
          @row-click="tableRowClick"
        >
          <el-table-column label="序号" align="center" type="index" width="50px">
            <template slot-scope="scope">
              <span>{{ scope.$index + (table.pageNum-1) * table.pageSize + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="配方名称" min-width="130px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.NoEdit">{{ scope.row.eqName }}</span>
              <el-input v-if="scope.row.Edit" v-model="scope.row.eqName" type="textarea" :autosize="{ minRows: 1.3, maxRows: 4}" style="width:80%;padding:10px 0;" maxlength="32" />
            </template>
          </el-table-column>
          <el-table-column label="配方颜色" min-width="130px" align="center">
            <template slot-scope="scope">
              <el-color-picker v-model="scope.row.financeCode" size="mini" :disabled="scope.row.NoEdit" style="margin:10px 0;" />
            </template>
          </el-table-column>
          <el-table-column label="牲畜类别" min-width="150px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.NoEdit">{{ scope.row.pastureName }}</span>
              <el-select v-if="scope.row.Edit" v-model="scope.row.pastureName" placeholder="牲畜类别" class="filter-item" style="width:80%;padding:10px 0;">
                <el-option v-for="item in livestockTypeList" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="配方类型" min-width="150px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.NoEdit">{{ scope.row.specification }}</span>
              <el-select v-if="scope.row.Edit" v-model="scope.row.specification" placeholder="配方类型" class="filter-item" style="width:80%;padding:10px 0;">
                <el-option v-for="item in formulaTypeList" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="来源" min-width="110px" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.status }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" min-width="110px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.NoEdit">{{ scope.row.yuanzhi }}</span>
              <el-input v-if="scope.row.Edit" v-model="scope.row.yuanzhi" type="textarea" :autosize="{ minRows: 1.3, maxRows: 4}" style="width:80%;padding:10px 0;" maxlength="32" />
            </template>
          </el-table-column>
          <el-table-column label="是否启用" min-width="110px" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.enable" :disabled="scope.row.NoEdit==true" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="handleEnableChange(scope.$index, scope.row)" />
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width" fixed="right">
            <template slot-scope="{row}">
              <!-- 新增 -->
              <el-button v-if="row.isCreate" class="miniSuccess" @click="createData(row)">保存</el-button>
              <el-button v-if="row.isCreate" class="minCancel" @click="createCancel(row)">取消</el-button>
              <!-- 编辑 -->
              <el-button v-if="row.isUpdate" class="miniSuccess" @click="handleUpdate(row)">编辑</el-button>
              <el-button v-if="row.isUpdate" class="miniDanger" @click="handleRowDelete(row)">删除</el-button>
              <!-- 编辑保存 -->
              <el-button v-if="row.isUpdateSave" class="miniSuccess" @click="updateData(row)">保存</el-button>
              <el-button v-if="row.isUpdateSave" class="minCancel" @click="updateCancel(row)">取消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 配方详情表 -->
    <div v-if="isDetail" ref="detail" class="detail" style="margin-top: 30px;">
      <p class="recipeDetail" />
      <div class="operation">
        <el-button class="success" @click="handleCreate2">新增</el-button>
        <el-button class="danger" @click="handleDelete2">删除</el-button>
        <el-button class="success" @click="handleSyntheticPremix">合成预混料</el-button>
        <div ref="selectInput2" class="filter-item selectInput">
          <el-input type="text" name="" value="" placeholder="请点击选择搜索条件" class="Input" />
          <i v-if="arrowDown2" icon="el-icon-arrow-down" class="el-icon-arrow-down" />
          <i v-if="arrowUp2" icon="el-icon-arrow-up" class="el-icon-arrow-up" />
          <ul v-if="arrowUp2" class="selectUl">
            <li><a>饲料名称</a><el-input v-model="table2.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
            <li><a>饲料类型</a><el-input v-model="table2.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
            <li><a>重量</a><el-input v-model="table2.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
            <li><a>搅拌延时</a><el-input v-model="table2.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
            <li><a>顺序</a><el-input v-model="table2.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
            <li>
              <div style="float: right;">
                <el-button class="minCancel" @click="arrowUp2=false;arrowDown2=true;">取消</el-button>
                <el-button class="miniSuccess" @click="handleSearch2">搜索</el-button>
              </div>
            </li>
          </ul>
        </div>
        <el-button class="successBorder" @click="handleSearch2">查询</el-button>
        <el-button class="successBorder" @click="handleRefresh2">重置</el-button>
      </div>

      <div class="table2">
        <el-table
          id="table2"
          ref="table2"
          :key="table2.tableKey"
          v-loading="table2.listLoading"
          element-loading-text="给我一点时间"
          :data="table2.list"
          border
          fit
          highlight-current-row
          style="width: 98%;"
          :row-style="rowStyle"
          :cell-style="cellStyle"
          class="elTable table-fixed"
          row-key="id"
          show-summary
          @selection-change="handleSelect"
        >
          <el-table-column type="selection" min-width="50" />
          <el-table-column label="序号" align="center" type="index" width="50px" />
          <el-table-column label="饲料组" min-width="130px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.groupNoEdit">{{ scope.row.group }}</span>
              <el-input v-if="scope.row.groupEdit" v-model="scope.row.group" type="textarea" :autosize="{ minRows: 1.3, maxRows: 4}" style="width:80%;padding:10px 0;" maxlength="32" />
            </template>
          </el-table-column>
          <el-table-column label="饲料名称" min-width="130px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.NoEdit">{{ scope.row.name }}</span>
              <el-select v-if="scope.row.Edit" v-model="scope.row.name" placeholder="" class="filter-item" style="width:80%;padding:10px 0;">
                <el-option v-for="item in feedNameList" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="重量（KG）" prop="weight" min-width="130px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.NoEdit">{{ scope.row.weight }}</span>
              <el-input v-if="scope.row.Edit" v-model="scope.row.weight" type="number" style="width:80%;padding:10px 0;" />
            </template>
          </el-table-column>
          <el-table-column label="搅拌延时（min）" min-width="130px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.NoEdit">{{ scope.row.hour }}</span>
              <el-select v-if="scope.row.Edit" v-model="scope.row.hour" placeholder="" class="filter-item" style="width:80%;padding:10px 0;">
                <el-option v-for="item in mixingDelayList" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="是否锁定牛头数比例" min-width="130px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.NoEdit">{{ scope.row.proportion }}</span>
              <el-select v-if="scope.row.Edit" v-model="scope.row.proportion" placeholder="" class="filter-item" style="width:80%;padding:10px 0;">
                <el-option v-for="item in lockBullsList" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="顺序" min-width="130px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.NoEdit">{{ scope.row.order }}</span>
              <el-input v-if="scope.row.Edit" v-model="scope.row.order" type="number" style="width:80%;padding:10px 0;" min-number="0" />
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" width="320" class-name="small-padding fixed-width" fixed="right">
            <template slot-scope="{row}">
              <!-- 新增 -->
              <el-button v-if="row.isCreate" class="miniSuccess" @click="createData2(row)">保存</el-button>
              <el-button v-if="row.isCreate" class="minCancel" @click="createCancel2(row)">取消</el-button>
              <!-- 编辑 -->
              <el-button v-if="row.isUpdate" class="miniSuccess" @click="handleUpdate2(row)">编辑</el-button>
              <el-button v-if="row.isUpdate" class="miniDanger" @click="handleRowDelete2(row)">删除</el-button>
              <!-- 编辑保存 -->
              <el-button v-if="row.isUpdateSave" class="miniSuccess" @click="updateData2(row)">保存</el-button>
              <el-button v-if="row.isUpdateSave" class="minCancel" @click="updateCancel2(row)">取消</el-button>
              <!-- 拆分预混料 -->
              <el-button v-if="row.isUpdate" class="miniSuccess" @click="handleSplitPremix(row)">拆分预混料</el-button>

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

    <!-- 配方记录 -->
    <el-dialog :title="textMap[template.dialogStatus]" :destroy-on-close="true" :visible.sync="template.dialogFormVisible" :close-on-click-modal="false" width="90%">
      <div style="height: 400px;overflow: auto;margin-bottom: 30px;">
        <div ref="templateDialog" class="templateDialog">
          <p class="recipeTemplate" />
          <div class="operation">
            <el-select v-model="table.getdataListParm.parammaps.enable" placeholder="请选择历史记录时间" class="filter-item" clearable>
              <el-option v-for="item in selectHistoryTimeList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
            <el-button class="successBorder" @click="handleApplication">应用</el-button>
          </div>

          <div class="search">
            <el-select v-model="table.getdataListParm.parammaps.enable" placeholder="牲畜类别" class="filter-item" clearable>
              <el-option v-for="item in livestockTypeList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
            <el-select v-model="table.getdataListParm.parammaps.enable" placeholder="配方类型" class="filter-item" style="width: 120px;" clearable>
              <el-option v-for="item in formulaTypeList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
            <el-select v-model="table.getdataListParm.parammaps.enable" placeholder="是否启用" class="filter-item" style="width: 120px;" clearable>
              <el-option v-for="item in enableList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
            <div ref="selectInput" class="filter-item selectInput">
              <el-input type="text" name="" value="" placeholder="请点击选择搜索条件" class="Input" />
              <i v-if="arrowDown" icon="el-icon-arrow-down" class="el-icon-arrow-down" />
              <i v-if="arrowUp" icon="el-icon-arrow-up" class="el-icon-arrow-up" />
              <ul v-if="arrowUp" class="selectUl">
                <li><a>模板名称</a><el-input v-model="table.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
                <li><a>制定人</a><el-input v-model="table.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
                <li><a>说明</a><el-input v-model="table.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
                <li>
                  <div style="float: right;">
                    <el-button class="minCancel" @click="arrowUp=false;arrowDown=true;">取消</el-button>
                    <el-button class="miniSuccess" @click="handleSearch">搜索</el-button>
                  </div>
                </li>
              </ul>
            </div>
            <el-button class="successBorder" @click="handleSearch">查询</el-button>
            <el-button class="successBorder" @click="handleRefresh">重置</el-button>
          </div>

          <div class="table">
            <el-table
              :key="table.tableKey"
              v-loading="table.listLoading"
              element-loading-text="给我一点时间"
              :data="table.list"
              border
              fit
              highlight-current-row
              style="width: 98%;"
              :row-style="rowStyle"
              :cell-style="cellStyle"
              class="elTable table-fixed"
              @row-click="tableRowClickDialog"
            >
              <el-table-column label="序号" align="center" type="index" width="50px">
                <template slot-scope="scope">
                  <span>{{ scope.$index + (table.pageNum-1) * table.pageSize + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="配方名称" min-width="130px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.eqName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="配方颜色" min-width="130px" align="center">
                <template slot-scope="scope">
                  <el-color-picker v-model="scope.row.financeCode" size="mini" :disabled="scope.row.NoEdit" style="margin:10px 0;" />
                </template>
              </el-table-column>
              <el-table-column label="牲畜类别" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.pastureName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="配方类型" min-width="150px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.specification }}</span>
                </template>
              </el-table-column>
              <el-table-column label="来源" min-width="110px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.status }}</span>
                </template>
              </el-table-column>
              <el-table-column label="备注" min-width="110px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.yuanzhi }}</span>
                </template>
              </el-table-column>
              <el-table-column label="是否启用" min-width="110px" align="center">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.enable" :disabled="scope.row.NoEdit==true" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="handleEnableChange(scope.$index, scope.row)" />
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div v-if="isDetailDialog" class="detailDialog" style="margin-top: 30px;">
          <p class="recipeDetail" />
          <div class="operation">
            <div ref="selectInput2" class="filter-item selectInput">
              <el-input type="text" name="" value="" placeholder="请点击选择搜索条件" class="Input" />
              <i v-if="arrowDown2" icon="el-icon-arrow-down" class="el-icon-arrow-down" />
              <i v-if="arrowUp2" icon="el-icon-arrow-up" class="el-icon-arrow-up" />
              <ul v-if="arrowUp2" class="selectUl">
                <li><a>饲料名称</a><el-input v-model="table2.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
                <li><a>饲料类型</a><el-input v-model="table2.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
                <li><a>重量</a><el-input v-model="table2.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
                <li><a>搅拌延时</a><el-input v-model="table2.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
                <li><a>顺序</a><el-input v-model="table2.getdataListParm.parammaps.enable" type="text" name="" value="" style="width: 245px;" /></li>
                <li>
                  <div style="float: right;">
                    <el-button class="minCancel" @click="arrowUp2=false;arrowDown2=true;">取消</el-button>
                    <el-button class="miniSuccess" @click="handleSearch2">搜索</el-button>
                  </div>
                </li>
              </ul>
            </div>
            <el-button class="successBorder" @click="handleSearch2">查询</el-button>
            <el-button class="successBorder" @click="handleRefresh2">重置</el-button>
          </div>

          <div class="table2">
            <el-table
              :key="table2.tableKey"
              v-loading="table2.listLoading"
              element-loading-text="给我一点时间"
              :data="table2.list"
              border
              fit
              highlight-current-row
              style="width: 98%;"
              :row-style="rowStyle"
              :cell-style="cellStyle"
              class="elTable table-fixed"
              row-key="id"
            >
              <el-table-column label="饲料组" min-width="130px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.group }}</span>
                </template>
              </el-table-column>
              <el-table-column label="饲料名称" min-width="130px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column label="重量（KG）" min-width="130px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.weight }}</span>
                </template>
              </el-table-column>
              <el-table-column label="搅拌延时（min）" min-width="130px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.hour }}</span>
                </template>
              </el-table-column>
              <el-table-column label="是否锁定牛头数比例" min-width="130px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.proportion }}</span>
                </template>
              </el-table-column>
              <el-table-column label="顺序" min-width="130px" align="center">
                <template slot-scope="scope">
                  <span>{{ scope.row.order }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div slot="footer" class="dialog-footer" style="right:30px;position:absolute;bottom:5px">
          <el-button @click="template.dialogFormVisible = false; ">关闭</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 合成预混料 -->
    <el-dialog :title="textMap[detail.dialogStatus]" :destroy-on-close="true" :visible.sync="detail.dialogFormVisible" :close-on-click-modal="false" width="90%">
      <div class="detailDialog">
        <h2>饲料</h2>
        <div class="table1">
          <el-table
            :key="detail.tableKey"
            v-loading="detail.listLoading"
            element-loading-text="给我一点时间"
            :data="detail.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            show-summary
          >
            <el-table-column label="序号" align="center" type="index" width="50px">
              <template slot-scope="scope">
                <span>{{ scope.$index + (detail.pageNum-1) * detail.pageSize + 1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="饲料名称" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.brandName }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="statusId" sortable label="重量（KG）" />
            <el-table-column label="搅拌延时（min）" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.brandName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否锁定牛头数比例" min-width="130px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.brandName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="顺序" min-width="110px" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.brandName }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <h2>合成预混料</h2>
        <div class="table2" style="margin-bottom: 50px;">
          <el-table
            :key="detail.tableKey2"
            v-loading="detail.listLoading2"
            element-loading-text="给我一点时间"
            :data="detail.list2"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
          >
            <el-table-column label="配方名称" min-width="130px" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.group" type="textarea" :autosize="{ minRows: 1.3, maxRows: 4}" style="width:80%;padding:10px 0;" maxlength="32" />
              </template>
            </el-table-column>
            <el-table-column label="配方颜色" min-width="130px" align="center">
              <template slot-scope="scope">
                <el-color-picker v-model="scope.row.financeCode" size="mini" style="margin:10px 0;" />
              </template>
            </el-table-column>
            <el-table-column label="牲畜类别" min-width="110px" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.pastureName" placeholder="牲畜类别" class="filter-item" style="width:80%;padding:10px 0;">
                  <el-option v-for="item in livestockTypeList" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="配方类型" min-width="130px" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.group" type="textarea" :autosize="{ minRows: 1.3, maxRows: 4}" style="width:80%;padding:10px 0;" maxlength="32" />
              </template>
            </el-table-column>
            <el-table-column label="来源" min-width="110px" align="center">
              <template slot-scope="scope">
                <el-select v-model="scope.row.pastureName" placeholder="来源" class="filter-item" style="width:80%;padding:10px 0;">
                  <el-option v-for="item in sourceList" :key="item.id" :label="item.name" :value="item.name" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="备注" min-width="130px" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.group" type="textarea" :autosize="{ minRows: 1.3, maxRows: 4}" style="width:80%;padding:10px 0;" maxlength="32" />
              </template>
            </el-table-column>
            <el-table-column label="是否启用" min-width="130px" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div slot="footer" class="dialog-footer" style="bottom: -50px;">
          <el-button class="cancel" @click="detail.dialogFormVisible = false; ">关闭</el-button>
          <el-button class="success" :disabled="isokDisable" @click="syntheticPremixData()">确认</el-button>
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetDataByName } from '@/api/common'
import Sortable from 'sortablejs'
import { MessageBox } from 'element-ui'
export default {
  name: 'RecipeTemplate',
  data() {
    return {
      livestockTypeList: [{ id: 0, name: '高产' }, { id: 1, name: '低产' }, { id: 2, name: '中产' }, { id: 3, name: '青年后备' }, { id: 4, name: '围产' }], // 牲畜类别
      formulaTypeList: [{ id: 0, name: '饲喂配方' }, { id: 1, name: '预混配方' }, { id: 2, name: '补料配方' }], // 配方类型
      enableList: [{ id: 0, name: '是' }, { id: 1, name: '否' }], // 是否启用
      lockBullsList: [{ id: 0, name: '是' }, { id: 1, name: '否' }], // 是否锁定牛头数比例
      feedNameList: [{ id: 0, name: '国产燕麦草' }, { id: 1, name: '玉米青贮' }, { id: 2, name: '羊草' }, { id: 3, name: '补充料' }], // 饲料名称
      mixingDelayList: [{ id: 0, name: '0' }, { id: 1, name: '1' }, { id: 2, name: '2' }, { id: 3, name: '3' }], // 搅拌延时
      selectHistoryTimeList: [{ id: 0, name: '2020-06-10' }, { id: 1, name: '2020-06-11' }, { id: 2, name: '2020-06-12' }, { id: 3, name: '2020-06-13' }], // 请选择历史记录时间
      sourceList: [{ id: 0, name: '自定义' }, { id: 1, name: '集团下发' }, { id: 2, name: '导入' }], // 导入

      arrowDown: true,
      arrowUp: false,

      table: {
        getdataListParm: {
          name: 'getAssetList',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            enable: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },

      isDetail: false,
      arrowDown2: true,
      arrowUp2: false,
      table2: {
        getdataListParm: {
          name: 'getAssetList',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            enable: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },

      isDetailDialog: false,
      template: {
        dialogFormVisible: false,
        dialogStatus: ''
      },

      detail: {
        dialogFormVisible: false,
        dialogStatus: '',
        getdataListParm: {
          name: 'getAssetList',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            enable: ''
          }
        },
        tableKey: 0,
        total: 0,
        listLoading: true,
        list: [],

        tableKey2: 0,
        total2: 0,
        listLoading2: false,
        list2: [{ 'enable': 1 }]
      },
      selectList: [],
      textMap: {
        RecipeRecord: '配方记录',
        SyntheticPremix: '合成预混料'
      },

      isokDisable: false,
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  mounted() {
    document.addEventListener('click', (e) => {
      if (this.$refs.selectInput !== undefined) {
        if (!this.$refs.selectInput.contains(e.target)) {
          this.arrowDown = true
          this.arrowUp = false
        } else {
          this.arrowDown = false
          this.arrowUp = true
        }
      }
      if (this.$refs.selectInput2 !== undefined) {
        if (!this.$refs.selectInput2.contains(e.target)) {
          this.arrowDown2 = true
          this.arrowUp2 = false
        } else {
          this.arrowDown2 = false
          this.arrowUp2 = true
        }
      }
    })
  },
  created() {
    this.getList()
  },
  methods: {
    // -------------------模板-----------------------------
    getList() {
      this.table.listLoading = true
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          for (let i = 0; i < response.data.list.length; i++) {
            this.$set(response.data.list[i], 'Edit', false) // 编辑
            this.$set(response.data.list[i], 'NoEdit', true) // 不可编辑/输入
            this.$set(response.data.list[i], 'isCreate', false) // 新增操作
            this.$set(response.data.list[i], 'isUpdate', true) // 编辑操作
            this.$set(response.data.list[i], 'isUpdateSave', false) // 编辑保存
          }
          this.table.list = response.data.list
          this.table.pageNum = response.data.pageNum
          this.table.pageSize = response.data.pageSize
            this.table.total = response.data.total
        } else {
          this.table.list = []
        }
        setTimeout(() => {
          this.table.listLoading = false
        }, 100)
      })
    },
    handleSearch() {
      console.log('点击了查询')
      this.getList()
      this.arrowDown = true
      this.arrowUp = false
    },
    handleRefresh() {
      console.log('点击了重置')
    },

    // 模板新增
    handleCreate() {
      console.log('点击了新增')
      // 编辑true/不可编辑false
      // 新增操true,编辑false，编辑保存false
      console.log(11)
      for (let i = 0; i < this.table.list.length; i++) {
        if (this.table.list[i].Edit === true) {
          console.log(123)
          this.$message({ type: 'error', message: '当前内容未保存，请点击取消或保存继续进行操作', duration: 2000 })
          return false
        }
      }
      this.table.list.unshift({ 'myId': (new Date()).valueOf(), 'Edit': true, 'NoEdit': false, 'isCreate': true, 'isUpdate': false, 'isUpdateSave': false, 'enable': 1 })
    },
    createData(row) {
      console.log('点击了新增保存', row)
    },
    createCancel(row) {
      console.log('点击了新增取消')
      for (let i = 0; i < this.table.list.length; i++) {
        if (row.myId === this.table.list[i].myId) {
          var listIndex = this.table.list.indexOf(this.table.list[i])
        }
        if (listIndex > -1) {
          this.table.list.splice(listIndex, 1)
          return
        }
      }
    },

    // 模板编辑
    handleUpdate(row) {
      for (let i = 0; i < this.table.list.length; i++) {
        if (this.table.list[i].Edit == true) {
          this.$message({ type: 'error', message: '当前内容未保存，请点击取消或保存继续进行操作', duration: 2000 })
          return false
        }
      }
      // 编辑true,不可编辑false
      row.Edit = true
      row.NoEdit = false
      // 新增false,编辑false,编辑保存true
      row.isCreate = false
      row.isUpdate = false
      row.isUpdateSave = true
    },
    updateData(row) {
      console.log('点击了编辑保存', row)
    },
    updateCancel(row) {
      console.log('点击了编辑取消')
      // 编辑false,不可编辑true
      row.Edit = false
      row.NoEdit = true
      // 新增false,编辑true,编辑保存false
      row.isCreate = false
      row.isUpdate = true
      row.isUpdateSave = false
    },

    // 删除
    handleDelete() {
      console.log('点击了删除')
    },
    // 复制
    handleCopy() {
      console.log('点击了复制')
    },
    // 配方记录
    handleRecipeRecord() {
      console.log('点击了配方记录')
      this.template.dialogStatus = 'RecipeRecord'
      this.template.dialogFormVisible = true
      this.getList()
    },

    // 应用
    handleApplication() {
      console.log('点击了应用')
    },
    tableRowClickDialog() {
      console.log('配方记录-模板行点击')
      this.isDetailDialog = true
      this.getListDialog()
    },

    getListDialog() {
      this.table2.listLoading = true
      GetDataByName(this.table2.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          for (let i = 0; i < response.data.list.length; i++) {
            this.$set(response.data.list[i], 'Edit', false) // 编辑
            this.$set(response.data.list[i], 'NoEdit', true) // 不可编辑/输入
            this.$set(response.data.list[i], 'groupEdit', false) // 饲料组编辑
            this.$set(response.data.list[i], 'groupNoEdit', true) // 饲料组不可编辑
            this.$set(response.data.list[i], 'isCreate', false) // 新增操作
            this.$set(response.data.list[i], 'isUpdate', true) // 编辑操作
            this.$set(response.data.list[i], 'isUpdateSave', false) // 编辑保存
          }

          this.table2.list = response.data.list
          this.table2.list = [
            { id: '0', group: '饲料组1', name: '饲料名称1', weight: '重量1', 'hour': '搅拌延时1', 'proportion': '是否锁定牛头数比例1', 'order': '0', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '1', group: '饲料组2', name: '饲料名称2', weight: '重量2', 'hour': '搅拌延时2', 'proportion': '是否锁定牛头数比例2', 'order': '1', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '2', group: '饲料组3', name: '饲料名称3', weight: '重量3', 'hour': '搅拌延时3', 'proportion': '是否锁定牛头数比例3', 'order': '2', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '3', group: '饲料组3', name: '饲料名称4', weight: '重量4', 'hour': '搅拌延时4', 'proportion': '是否锁定牛头数比例4', 'order': '2', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '4', group: '饲料组4', name: '饲料名称5', weight: '重量5', 'hour': '搅拌延时5', 'proportion': '是否锁定牛头数比例5', 'order': '3', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '5', group: '饲料组4', name: '饲料名称6', weight: '重量6', 'hour': '搅拌延时6', 'proportion': '是否锁定牛头数比例6', 'order': '3', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '6', group: '饲料组4', name: '饲料名称7', weight: '重量7', 'hour': '搅拌延时7', 'proportion': '是否锁定牛头数比例7', 'order': '3', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '7', group: '饲料组6', name: '饲料名称8', weight: '重量8', 'hour': '搅拌延时8', 'proportion': '是否锁定牛头数比例8', 'order': '5', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true }
          ]
          this.table2.pageNum = response.data.pageNum
          this.table2.pageSize = response.data.pageSize
            this.table2.total = response.data.total
        } else {
          this.table2.list = []
        }
        this.$nextTick(function() {
          window.scrollTo({
            'top': this.$refs.templateDialog.clientHeight
          })
        })
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },
    // 模板行点击
    tableRowClick(row, column, event) {
      console.log(row, column, event)
      for (let i = 0; i < this.table.list.length; i++) {
        if (this.table.list[i].Edit == true) {
          return false
        }
      }
      if (column.label !== '操作') {
        this.isDetail = true // 点击行显示详情
        this.getList2()
      }
    },

    // -------------------详情-----------------------------
    getList2() {
      this.table2.listLoading = true
      GetDataByName(this.table2.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          for (let i = 0; i < response.data.list.length; i++) {
            this.$set(response.data.list[i], 'Edit', false) // 编辑
            this.$set(response.data.list[i], 'NoEdit', true) // 不可编辑/输入
            this.$set(response.data.list[i], 'groupEdit', false) // 饲料组编辑
            this.$set(response.data.list[i], 'groupNoEdit', true) // 饲料组不可编辑
            this.$set(response.data.list[i], 'isCreate', false) // 新增操作
            this.$set(response.data.list[i], 'isUpdate', true) // 编辑操作
            this.$set(response.data.list[i], 'isUpdateSave', false) // 编辑保存
          }

          this.table2.list = response.data.list
          this.table2.list = [
            { id: '0', group: '饲料组1', name: '饲料名称1', weight: '1', 'hour': '搅拌延时1', 'proportion': '是否锁定牛头数比例1', 'order': '0', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '1', group: '饲料组2', name: '饲料名称2', weight: '2', 'hour': '搅拌延时2', 'proportion': '是否锁定牛头数比例2', 'order': '1', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '2', group: '饲料组3', name: '饲料名称3', weight: '3', 'hour': '搅拌延时3', 'proportion': '是否锁定牛头数比例3', 'order': '2', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '3', group: '饲料组3', name: '饲料名称4', weight: '4', 'hour': '搅拌延时4', 'proportion': '是否锁定牛头数比例4', 'order': '2', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '4', group: '饲料组4', name: '饲料名称5', weight: '5', 'hour': '搅拌延时5', 'proportion': '是否锁定牛头数比例5', 'order': '3', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '5', group: '饲料组4', name: '饲料名称6', weight: '6', 'hour': '搅拌延时6', 'proportion': '是否锁定牛头数比例6', 'order': '3', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '6', group: '饲料组4', name: '饲料名称7', weight: '7', 'hour': '搅拌延时7', 'proportion': '是否锁定牛头数比例7', 'order': '3', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true },
            { id: '7', group: '饲料组6', name: '饲料名称8', weight: '8', 'hour': '搅拌延时8', 'proportion': '是否锁定牛头数比例8', 'order': '5', 'Edit': false, 'NoEdit': true, 'isCreate': false, 'isUpdate': true, 'isUpdateSave': false, 'groupEdit': false, 'groupNoEdit': true }
          ]
          this.table2.pageNum = response.data.pageNum
          this.table2.pageSize = response.data.pageSize
          this.rowDrop()
            this.table2.total = response.data.total
        } else {
          this.table2.list = []
        }
        this.$nextTick(function() {
          console.log(this.$refs)
          console.log(this.$refs.template.clientHeight)
          window.scrollTo({
            'top': this.$refs.template.clientHeight
          })
        })
        setTimeout(() => {
          this.table2.listLoading = false
        }, 100)
      })
    },
    // 行拖拽
    rowDrop() {
      console.log(document.querySelector('#table2 .el-table__body-wrapper tbody'))
      const tbody = document.querySelector('#table2 .el-table__body-wrapper tbody')
      const that = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = that.table2.list.splice(oldIndex, 1)[0]
          that.table2.list.splice(newIndex, 0, currRow)
          console.log('索引', newIndex)
          console.log('拖动数据', currRow)
          console.log('上', that.table2.list[newIndex - 1])
          console.log('下', that.table2.list[newIndex + 1])

          if (that.table2.list[newIndex - 1] === undefined) { // 拖动至最上方无值 // 顺序等于0，其他+1 // 饲料组等于饲料名称
            for (let i = 0; i < that.table2.list.length; i++) {
              that.table2.list[i].order = parseInt(that.table2.list[i].order) + 1 // 其他的顺序＋1
            }
            currRow.order = 0
            currRow.group = currRow.name
            console.log('拖动至最上方无值')
          } else if (currRow.order == that.table2.list[newIndex - 1].order) { // 拖动值顺序等于上值顺序
            currRow.order = that.table2.list[newIndex - 1].order
            console.log('拖动值顺序等于上值顺序')
          } else if (that.table2.list[newIndex + 1] == undefined) { // 拖动至最下方无值 // 顺序等于上方顺序+1 // 饲料组等于饲料名称
            currRow.order = parseInt(that.table2.list[newIndex - 1].order) + 1
            currRow.group = currRow.name
            console.log('拖动至最下方无值')
          } else if (currRow.order == that.table2.list[newIndex + 1].order) { // 拖动值顺序等于下值顺序
            currRow.order == that.table2.list[newIndex + 1].order
            console.log('拖动值顺序等于下值顺序')
          } else if (that.table2.list[newIndex - 1].order == that.table2.list[newIndex + 1].order) { // 拖动至上下顺序一致，顺序/饲料组与上下保持一致
            currRow.order = that.table2.list[newIndex - 1].order
            currRow.group = that.table2.list[newIndex - 1].group
            console.log('拖动至上下顺序一致')
          } else if (that.table2.list[newIndex - 1].order !== undefined && that.table2.list[newIndex + 1].order !== undefined) { // 拖动至上下都有值
            console.log('上下')
            if (parseInt(that.table2.list[newIndex - 1].order) + 1 == that.table2.list[newIndex + 1].order) {
              console.log(newIndex)
              for (let i = newIndex; i < that.table2.list.length; i++) {
                that.table2.list[i].order = parseInt(that.table2.list[i].order) + 1
              }
            }
            currRow.order = parseInt(that.table2.list[newIndex - 1].order) + 1
            currRow.group = currRow.name
            console.log(that.table2.list[newIndex + 1].order)
          }
        }
      })
    },

    handleSearch2() {
      console.log('点击了查询')
      this.getList()
      this.arrowDown = true
      this.arrowUp = false
    },
    handleRefresh2() {
      console.log('点击了重置')
    },

    // 详情新增
    handleCreate2() {
      console.log('点击了详情新增')
      // 编辑true/不可编辑false
      // 新增操true,编辑false，编辑保存false
      console.log(11)
      for (let i = 0; i < this.table2.list.length; i++) {
        if (this.table2.list[i].Edit === true) {
          console.log(123)
          this.$message({ type: 'error', message: '当前内容未保存，请点击取消或保存继续进行操作', duration: 2000 })
          return false
        }
      }
      this.table2.list.unshift({ 'myId': (new Date()).valueOf(), 'Edit': true, 'NoEdit': false, 'isCreate': true, 'isUpdate': false, 'isUpdateSave': false, 'enable': 1 })
    },
    createData2(row) {
      console.log('点击了详情新增保存', row)
    },
    createCancel2(row) {
      console.log('点击了详情新增取消')
      for (let i = 0; i < this.table.list.length; i++) {
        if (row.myId === this.table.list[i].myId) {
          var listIndex = this.table.list.indexOf(this.table2.list[i])
        }
        if (listIndex > -1) {
          this.table2.list.splice(listIndex, 1)
          return
        }
      }
    },

    // 详情编辑
    handleUpdate2(row) {
      const rowArr = []
      for (let i = 0; i < this.table2.list.length; i++) {
        if (this.table2.list[i].Edit == true) {
          this.$message({ type: 'error', message: '当前内容未保存，请点击取消或保存继续进行操作', duration: 2000 })
          return false
        }
        rowArr.push(this.table2.list[i].order)
        // console.log(this.table2.list[i].order, '591')
      }
      console.log(rowArr)
      for (let i = 0; i < rowArr.length; i++) {
        if (rowArr[i] == row.order) {
          rowArr.splice(i, 1)
        }
      }
      console.log(rowArr)
      for (let i = 0; i < rowArr.length; i++) {
        console.log(rowArr[i], row.order)
        if (rowArr[i] !== row.order) {
          // 饲料组编辑false，不可编辑true
          row.groupEdit = false
          row.groupNoEdit = true
          // 编辑true,不可编辑false
          row.Edit = true
          row.NoEdit = false
          // 新增false,编辑false,编辑保存true
          row.isCreate = false
          row.isUpdate = false
          row.isUpdateSave = true
        } else {
          // 饲料组编辑true，不可编辑false
          row.groupEdit = true
          row.groupNoEdit = false
          console.log(222)
          // 编辑true,不可编辑false
          row.Edit = true
          row.NoEdit = false
          // 新增false,编辑false,编辑保存true
          row.isCreate = false
          row.isUpdate = false
          row.isUpdateSave = true
          return false
        }
      }
    },
    updateData2(row) {
      console.log('点击了详情编辑保存', row)
    },
    updateCancel2(row) {
      console.log('点击了详情编辑取消')
      // 饲料组编辑false，不可编辑true
      row.groupEdit = false
      row.groupNoEdit = true
      // 编辑false,不可编辑true
      row.Edit = false
      row.NoEdit = true
      // 新增false,编辑true,编辑保存false
      row.isCreate = false
      row.isUpdate = true
      row.isUpdateSave = false
    },

    // 拆分预混料
    handleSplitPremix(row) {
      console.log('点击了拆分预混料')
      MessageBox.confirm('是否确认拆分当前预混料?', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('保存')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    handleDelete2() {
      console.log('点击了详情删除')
    },
    handleSelect(val) {
      console.log('勾选数据', val)
      this.selectList = val
    },
    handleSyntheticPremix() {
      console.log('点击了合成预混料')
      if (this.selectList.length >= 2) {
        this.detail.dialogStatus = 'SyntheticPremix'
        this.detail.dialogFormVisible = true
        this.getListSyntheticPremix()
      } else {
        this.$message({ type: 'error', message: '请选择俩条及以上饲料进行合成', duration: 2000 })
        return false
      }
    },
    getListSyntheticPremix() {
      this.detail.listLoading = true
      GetDataByName(this.detail.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.detail.list = response.data.list
          this.detail.pageNum = response.data.pageNum
          this.detail.pageSize = response.data.pageSize
            this.detail.total = response.data.total
        } else {
          this.detail.list = []
        }
        setTimeout(() => {
          this.detail.listLoading = false
        }, 100)
      })
    },
    syntheticPremixData() {
      console.log('点击了合成预混料确认')
    }

  }
}
</script>
<style lang="scss" scoped>
  .search{margin-top:10px;}
  .table{margin-top:10px;}
  .table2{margin-top:10px;}
  $width:350px;
  $left:325px;
  .selectInput{
    position: relative;
    display: inline-block;
    .Input{width: $width;position: relative;}
    .el-icon-arrow-down{width: 30px;height: 30px;position: absolute;left: $left;top:10px;color:#C0C4CC;}
    .el-icon-arrow-up{width: 30px;height: 30px;position: absolute;left: $left;top:10px;color:#C0C4CC;}
    .selectUl{
      z-index: 111;width: $width;background: #fff;border: 1px solid #E4E7ED;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);margin: -1px 0 0 0;padding: 6px 0; margin: 0;box-sizing: border-box;position: absolute;
      li{
        list-style: none;font-size: 14px; padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #606266; height: 50px; line-height: 50px; box-sizing: border-box; cursor: pointer;
        a{float:left;width: 80px;}
        a:hover{color: rgba(0, 204, 102, 0.71); font-weight: 700;}
      }
    }
  }
  .template{
    background: #fff;
    position: relative;
    .recipeTemplate{
      width: 72px;
      height: 70px;
      position: absolute;
      background: url(../../../assets/images/bg1.jpg) no-repeat;
      right: 0;
      top: 0;
      margin: 0;
    }
  }

  .detail{
    background: #fff;
    position: relative;
    .recipeDetail{
      width: 72px;
      height: 70px;
      position: absolute;
      background: url(../../../assets/images/bg2.jpg) no-repeat;
      right: 0;
      top: 0;
      margin: 0;
    }
  }

  .templateDialog{
    background: #fff;
    position: relative;
    .recipeTemplate{
      width: 72px;
      height: 70px;
      position: absolute;
      background: url(../../../assets/images/bg1.jpg) no-repeat;
      right: 0;
      top: 0;
      margin: 0;
    }
  }
 .detailDialog{
    background: #fff;
    position: relative;
    .recipeDetail{
      width: 72px;
      height: 70px;
      position: absolute;
      background: url(../../../assets/images/bg2.jpg) no-repeat;
      right: 0;
      top: 0;
      margin: 0;
    }
  }
 </style>