<template>
  <div class="app-container">
    <div class="operation">
      <el-button class="success" @click="handleFormulaDistribution">配方下发</el-button>
    </div>
    <div class="search">
      <el-input v-model="table.getdataListParm.parammaps.fname" placeholder="配方名称" style="width: 180px;" class="filter-item" clearable />
      <el-select v-model="table.getdataListParm.parammaps.ccname" placeholder="牲畜类别" class="filter-item" style="width: 120px;" clearable>
        <el-option v-for="item in livestockList" :key="item.id" :label="item.mixname" :value="item.classname" />
      </el-select>
      <el-select v-model="table.getdataListParm.parammaps.fttype" placeholder="配方类型" class="filter-item" style="width: 120px;" clearable>
        <el-option v-for="item in formulaTypeList" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <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: 100%;"
        :row-style="rowStyle"
        :cell-style="cellStyle"
        class="elTable table-fixed"
      >
        <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" prop="tname" />
        <el-table-column label="牲畜类别" min-width="130px" align="center" prop="ccname" />
        <el-table-column label="配方类型" min-width="130px" align="center" prop="fttype" />
        <el-table-column label="是否为当前配方" min-width="130px" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isissue == 0">否</span>
            <span v-else>是</span>
          </template>
        </el-table-column>
        <el-table-column label="已下发牧场" min-width="130px" align="center" prop="grouppastures" />
        <el-table-column label="备注" min-width="130px" align="center" prop="remark" />

        <el-table-column label="操作" :show-overflow-tooltip="true" align="center" class-name="small-padding fixed-width" width="50" fixed="right">
          <template slot-scope="{row}">
            <el-button class="miniSuccess" @click="handleSee(row)" icon="el-icon-search" />
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="table.total>0" :total="table.total" :page.sync="table.getdataListParm.offset" :limit.sync="table.getdataListParm.pagecount" @pagination="getList" />
    </div>

    <!-- 配方下发 -->
    <el-dialog :title="textMap[formulaDistribution.dialogStatus]" :visible.sync="formulaDistribution.dialogFormVisible" :close-on-click-modal="false" width="70%">
      <div class="app-formulaDistribution">
        <h4>请选择下发配方:</h4>
        <div class="table">
          <el-table
            :key="formulaDistribution.table.tableKey"
            v-loading="formulaDistribution.table.listLoading"
            element-loading-text="给我一点时间"
            :data="formulaDistribution.table.list"
            border
            fit
            highlight-current-row
            style="width: 100%;"
            :row-style="rowStyle"
            :cell-style="cellStyle"
            class="elTable table-fixed"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" align="center" type="index" width="50px" />
            <el-table-column label="配方名称" min-width="130px" align="center" prop="tname" />
            <el-table-column label="牲畜类别" min-width="130px" align="center" prop="ccname" />
            <el-table-column label="配方类型" min-width="130px" align="center" prop="fttype" />
            <el-table-column label="备注" min-width="130px" align="center" prop="remark" />
            <el-table-column label="是否启用" min-width="110px" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.enable" disabled 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 slot="footer" class="dialog-footer" style="bottom: 10px;">
        <el-button class="cancelClose" @click="formulaDistribution.dialogFormVisible = false; ">关闭</el-button>
        <el-button class="success" :disabled="isokDisable" @click="nextData()">下一步</el-button>
      </div>
    </el-dialog>

    <!-- 牧场 -->
    <el-dialog :title="textMap[formulaDistribution.pasture.dialogStatus]" :visible.sync="formulaDistribution.pasture.dialogFormVisible" :close-on-click-modal="false" width="40%">
      <div class="app-pasture">
        <h4>选择下发牧场:</h4>
        <el-checkbox v-model="formulaDistribution.pasture.checkAll" :indeterminate="formulaDistribution.pasture.isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;" />
        <el-checkbox-group v-model="formulaDistribution.pasture.checkedList" @change="handlePastureChange">
          <el-checkbox v-for="item in formulaDistribution.pasture.list" :key="item.id" :label="item" :value="item.id">{{ item.pasturename }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer" style="bottom: 10px;">
        <el-button class="cancelClose" @click="formulaDistribution.pasture.dialogFormVisible = false; ">关闭</el-button>
        <el-button class="success" :disabled="isokDisable" @click="formulaDistributionData()">确认</el-button>
      </div>
    </el-dialog>

    <!-- 查看 -->
    <el-dialog :title="textMap[see.dialogStatus]" :visible.sync="see.dialogFormVisible" :close-on-click-modal="false" width="70%">
      <div class="app-see">
        <el-tabs v-model="see.activeName" @tab-click="handleSeeTabClick">
          <el-tab-pane label="下发记录" name="first">
            <div class="search">
              <el-select v-model="see.tab1.table.getdataListParm.parammaps.pasturename" placeholder="牧场" class="filter-item" style="width: 120px;" clearable>
                <el-option v-for="item in formulaDistribution.pasture.list" :key="item.id" :label="item.pasturename" :value="item.pasturename" />
              </el-select>
              <el-button class="successBorder" @click="handleSeeTab1Search">查询</el-button>
            </div>
            <div class="table">
              <el-table
                :key="see.tab1.table.tableKey"
                v-loading="see.tab1.table.listLoading"
                element-loading-text="给我一点时间"
                :data="see.tab1.table.list"
                border
                fit
                highlight-current-row
                style="width: 100%;"
                :row-style="rowStyle"
                :cell-style="cellStyle"
                class="elTable table-fixed"
                @row-click="handleSeeTab1RowClick"
              >
                <el-table-column label="序号" align="center" type="index" width="50px">
                  <template slot-scope="scope">
                    <span>{{ scope.$index + (see.tab1.table.pageNum-1) * see.tab1.table.pageSize + 1 }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="牧场" min-width="130px" align="center" prop="pasturename" />
                <el-table-column label="下发时间" min-width="130px" align="center" prop="date" />
              </el-table>
            </div>
            <pagination v-show="see.tab1.table.total>0" :total="see.tab1.table.total" :page.sync="see.tab1.table.getdataListParm.offset" :limit.sync="see.tab1.table.getdataListParm.pagecount" @pagination="getSeeTab1List" />
          </el-tab-pane>
          <el-tab-pane label="使用情况" name="second">
            <div class="search">
              <el-autocomplete v-model="see.tab2.table.getdataListParm.parammaps.date" value-key="date" class="inline-input filter-item" :fetch-suggestions="dateSearch" placeholder="日期" style="width:250px" @select="handleSelectDate">
                <template slot-scope="{ item }">
                  <span>{{ item.date }}</span>
                </template>
              </el-autocomplete>
              <el-button class="successBorder" @click="handleSeeTab2Search">查询</el-button>
            </div>
            <div class="table">
              <el-table
                id="table"
                :key="see.tab2.table.tableKey"
                ref="table"
                v-loading="see.tab2.table.listLoading"
                element-loading-text="给我一点时间"
                :data="see.tab2.table.list"
                border
                highlight-current-row
                style="width: 100%;"
                :height="height"
                :row-style="rowStyle"
                :cell-style="cellStyle"
                class="elTable table-fixed"
                row-key="id"
                :show-header="false"
              >
                <el-table-column label="1" width="100px" align="center" prop="pasturename" />
                <el-table-column label="1" width="120px" align="center" prop="tname" />
                <el-table-column label="1" width="130px" align="center" prop="datestr" />
                <el-table-column label="1" min-width="800px" align="center">
                  <template slot-scope="scope">
                    <div v-for="element in scope.row.arrList" :key="element.concatname" class="list-group-item2 item" style="width: 100px;float: left;margin: 5px 5px;padding: 0;height: 30px;">
                      <el-tooltip placement="top">
                        <div slot="content">{{ element.concatname }}</div>
                        <span :style="{'color':element.color}" style="display: block;height:30px;line-height: 30px;">
                          {{ element.concatname }}
                        </span>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer" style="bottom: 10px;">
        <el-button class="cancelClose" @click="see.dialogFormVisible = false; ">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { GetDataByName, GetDataByNames, GetArrList, ExecDataByConfig } from '@/api/common'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils/index.js'
import Cookies from 'js-cookie'

export default {
  name: 'FormulaDistribution',
  components: { Pagination },
  data() {
    return {
      formulaTypeList: '',
      livestockList: '',
      requestParams: [
        { name: 'getDictByName2', offset: 0, pagecount: 0, params: ['配方类型'] },
        { name: 'getCowclassListEnable', offset: 0, pagecount: 0, parammaps: { 'pastureid': Cookies.get('pastureid') }}
      ],
      table: {
        getdataListParm: {
          name: 'getFTListXF',
          page: 1,
          offset: 1,
          pagecount: 10,
          returntype: 'Map',
          parammaps: {
            pastureid: Cookies.get('pastureid'),
            tname: '',
            ccname: '',
            fttype: '',
            remark: ''
          }
        },
        tableKey: 0,
        list: [],
        total: 0,
        listLoading: true
      },

      formulaDistribution: {
        dialogFormVisible: false,
        dialogStatus: '',
        table: {
          getdataListParm: {
            name: 'getFTListXF',
            page: 1,
            offset: 1,
            pagecount: 0,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid')
            }
          },
          tableKey: 1,
          list: [],
          total: 0,
          listLoading: true
        },
        selectList: [],
        pasture: {
          dialogFormVisible: false,
          dialogStatus: '',
          getdataListParm: {
            name: 'getgroupsPasture',
            page: 1,
            offset: 1,
            pagecount: 0,
            returntype: 'Map',
            parammaps: {
              pastureid: Cookies.get('pastureid')
            }
          },
          total: 0,
          listLoading: true,
          // 牧场
          checkAll: false,
          checkedList: [],
          list: [],
          isIndeterminate: false
        }
      },

      see: {
        dialogFormVisible: false,
        dialogStatus: '',
        activeName: 'first',
        temp: {},
        tab1: {
          table: {
            getdataListParm: {
              name: 'getFTListXFhis',
              page: 1,
              offset: 1,
              pagecount: 10,
              returntype: 'Map',
              parammaps: {
                pastureid: '',
                ftid: '',
                pasturename: ''
              }
            },
            tableKey: 2,
            list: [],
            total: 0,
            listLoading: true
          }
        },
        tab2: {
          table: {
            getdataListParm: {
              name: 'getFTusageList',
              name1: 'getFTdusageList',
              page: 1,
              offset: 1,
              pagecount: 0,
              returntype: 'Map',
              parammaps: {
                pastureid: Cookies.get('pastureid'),
                date: ''
              }
            },
            tableKey: 3,
            list: [],
            total: 0,
            listLoading: true
          },
          date: {
            getdataListParm: {
              name: 'getFTListXFhisTime',
              page: 1,
              offset: 1,
              pagecount: 10,
              returntype: 'Map',
              parammaps: {
                pastureid: Cookies.get('pastureid'),
                date: ''
              }
            },
            list: []
          }
        }
      },
      textMap: {
        formulaDistribution: '配方下发',
        see: '查看',
        pasture: '配方下发'
      },
      requestParam: {},
      isokDisable: false,
      height: document.body.clientHeight,
      rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  created() {
    this.getDownList()
    this.getList()
  },

  methods: {
    getDownList() {
      GetDataByNames(this.requestParams).then(response => {
        console.log(response)
        this.livestockList = response.data.getCowclassListEnable.list
        this.formulaTypeList = response.data.getDictByName2.list
      })
    },
    getList() {
      this.table.listLoading = true
      GetDataByName(this.table.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          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() {
      this.table.getdataListParm.offset = 1
      this.getList()
    },
    handleRefresh() {
      this.table.getdataListParm.parammaps.tname = ''
      this.table.getdataListParm.parammaps.ccname = ''
      this.table.getdataListParm.parammaps.fttype = ''
      this.table.getdataListParm.parammaps.remark = ''
    },

    // 配方下发
    handleFormulaDistribution() {
      this.formulaDistribution.dialogStatus = 'formulaDistribution'
      this.formulaDistribution.dialogFormVisible = true
      this.getFormulaDistributionList()
    },
    handleSelectionChange(item) {
      this.formulaDistribution.selectList = item
    },
    getFormulaDistributionList() {
      this.formulaDistribution.table.listLoading = true
      GetDataByName(this.formulaDistribution.table.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.formulaDistribution.table.list = response.data.list
        } else {
          this.formulaDistribution.table.list = []
        }
        setTimeout(() => {
          this.formulaDistribution.table.listLoading = false
        }, 100)
      })
    },
    nextData() {
      if (this.formulaDistribution.selectList.length == 0) {
        this.$message({ type: 'error', message: '请选择下发配方', duration: 2000 })
        return false
      } else {
        for (let i = 0; i < this.formulaDistribution.selectList.length; i++) {
          if (this.formulaDistribution.selectList[i].enable == 0) {
            this.$message({ type: 'error', message: '配方未启用不可下发', duration: 2000 })
            return false
          }
        }
        this.formulaDistribution.pasture.dialogStatus = 'pasture'
        this.formulaDistribution.pasture.dialogFormVisible = true
        this.getPastureList()
      }
    },
    getPastureList() {
      GetDataByName(this.formulaDistribution.pasture.getdataListParm).then(response => {
        if (response.data.list !== null) {
          this.formulaDistribution.pasture.list = response.data.list
        } else {
          this.formulaDistribution.pasture.list = []
        }
      })
    },
    handleCheckAllChange(val) {
      this.formulaDistribution.pasture.checkedList = val ? this.formulaDistribution.pasture.list : []
      this.formulaDistribution.pasture.isIndeterminate = false
    },
    handlePastureChange(value) {
      const checkedCount = value.length
      this.formulaDistribution.pasture.checkAll = checkedCount === this.formulaDistribution.pasture.list.length
      this.formulaDistribution.pasture.isIndeterminate = checkedCount > 0 && checkedCount < this.formulaDistribution.pasture.list.length
    },
    formulaDistributionData() {
      if (this.formulaDistribution.pasture.checkedList.length == 0) {
        this.$message({ type: 'error', message: '请选择下发牧场', duration: 2000 })
        return false
      } else {
        this.isokDisable = true
        setTimeout(() => {
          this.isokDisable = false
        }, 1000)
        this.requestParam.common = { 'returnmap': '0' }
        this.requestParam.data = []
        this.requestParam.data[0] = { 'name': 'insertSpotList', 'resultmaps': { 'list': this.formulaDistribution.selectList }}
        this.requestParam.data[0].children = []
        this.requestParam.data[0].children[0] = { 'name': 'insertfeedtemplet_issue', 'type': 'e', 'parammaps': {
          pastureid: Cookies.get('pastureid'),
          ftid: '@insertSpotList.id'
        }}
        this.requestParam.data[0].children[1] = { 'name': 'insertftdetail_issue', 'type': 'e', 'parammaps': {
          pastureid: Cookies.get('pastureid'),
          ftid: '@insertSpotList.id'
        }}
        this.requestParam.data[1] = { 'name': 'insertSpotList2', 'resultmaps': { 'list': this.formulaDistribution.pasture.checkedList }}
        this.requestParam.data[1].children = []
        this.requestParam.data[1].children[0] = { 'name': 'deleteFTissue', 'type': 'e', 'parammaps': {
          pastureid: '@insertSpotList2.id',
          groupsid: Cookies.get('pastureid')
        }}
        this.requestParam.data[1].children[1] = { 'name': 'insertfeedtempletISS', 'type': 'e', 'parammaps': {
          pastureid: '@insertSpotList2.id',
          groupsid: Cookies.get('pastureid')
        }}
        this.requestParam.data[1].children[2] = { 'name': 'insertftdetailISS', 'type': 'e', 'parammaps': {
          pastureid: '@insertSpotList2.id',
          groupsid: Cookies.get('pastureid')
        }}
        this.requestParam.data[1].children[3] = { 'name': 'insertfeedtemplet_pastureISS', 'type': 'e', 'parammaps': {
          pastureid: '@insertSpotList2.id',
          pasturename: '@insertSpotList2.pasturename',
          groupsid: Cookies.get('pastureid')
        }}
        this.requestParam.data[1].children[4] = { 'name': 'deleteFeedissue', 'type': 'e', 'parammaps': {
          pastureid: '@insertSpotList2.id',
          groupsid: Cookies.get('pastureid')
        }}

        this.requestParam.data[1].children[5] = { 'name': 'insertFeedissue', 'type': 'e', 'parammaps': {
          pastureid: '@insertSpotList2.id',
          groupsid: Cookies.get('pastureid')
        }}
        this.requestParam.data[1].children[6] = { 'name': 'insertFeednurissue', 'type': 'e', 'parammaps': {
          pastureid: '@insertSpotList2.id',
          groupsid: Cookies.get('pastureid')
        }}
        ExecDataByConfig(this.requestParam).then(response => {
          console.log('配方下发保存发送参数', this.requestParam)
          if (response.msg === 'fail') {
            this.$notify({ title: '保存失败', message: response.data, type: 'warning', duration: 2000 })
          } else {
            this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
            this.formulaDistribution.dialogFormVisible = false
            this.formulaDistribution.pasture.dialogFormVisible = false
            this.getList()
          }
        })
      }
    },

    // 查看
    handleSee(row) {
      this.see.dialogStatus = 'see'
      this.see.dialogFormVisible = true
      this.see.temp = Object.assign({}, row)
      this.see.activeName = 'first'
      this.getSeeTab1List()
      this.getPastureList()
      this.getSeeTab2DateList()
    },
    getSeeTab1List() {
      this.see.tab1.table.listLoading = true
      this.see.tab1.table.getdataListParm.parammaps.ftid = this.see.temp.id
      this.see.tab1.table.getdataListParm.parammaps.pastureid = this.see.temp.pastureid
      GetDataByName(this.see.tab1.table.getdataListParm).then(response => {
        console.log('下发记录数据', response.data.list)
        if (response.data.list !== null) {
          this.see.tab1.table.list = response.data.list
          this.see.tab1.table.pageNum = response.data.pageNum
          this.see.tab1.table.pageSize = response.data.pageSize
          this.see.tab1.table.total = response.data.total
        } else {
          this.see.tab1.table.list = []
        }
        setTimeout(() => {
          this.see.tab1.table.listLoading = false
        }, 100)
      })
    },
    handleSeeTab1Search() {
      this.getSeeTab1List()
    },
    getSeeTab2List() {
      this.see.tab2.table.listLoading = true
      GetArrList(this.see.tab2.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++) {
            if (response.data.list[i].arrList == null) {
              this.$set(response.data.list[i], 'Disabled', false)
              this.$set(response.data.list[i], 'arrList', [])
            }
          }
          this.see.tab2.table.list = response.data.list
          if (response.data.total) {
            this.see.tab2.table.total = response.data.total
          }
        } else {
          this.see.tab2.table.list = []
        }
        setTimeout(() => {
          this.see.tab2.table.listLoading = false
        }, 100)
      })
    },
    handleSeeTab2Search() {
      if (this.see.tab2.table.getdataListParm.parammaps.date == '') {
        this.see.tab2.table.getdataListParm.parammaps.date = this.see.tab2.date.list[0].date
      }
      this.getSeeTab2List()
    },
    getSeeTab2DateList() {
      GetDataByName(this.see.tab2.date.getdataListParm).then(response => {
        console.log('table数据', response.data.list)
        if (response.data.list !== null) {
          this.see.tab2.date.list = response.data.list
        } else {
          this.see.tab2.table.list = []
        }
      })
    },

    dateSearch(queryString, cb) {
      this.see.tab2.date.getdataListParm.parammaps['date'] = queryString
      GetDataByName(this.see.tab2.date.getdataListParm).then(response => {
        console.log('模糊查询搜索data', response.data.list)
        if (response.data.list == null) {
          cb([])
        } else {
          cb(response.data.list)
        }
      })
    },
    handleSelectDate(item) {
      this.see.tab2.table.getdataListParm.parammaps.date = item.date
    },
    handleSeeTabClick() {
      if (this.see.activeName == 'first') {
        this.getSeeTab1List()
      } else {
        this.see.tab2.table.getdataListParm.parammaps.date = this.see.tab2.date.list[0].date
        this.getSeeTab2List()
      }
    },
    handleSeeTab1RowClick(row) {
      console.log(row)
      this.see.activeName = 'second'
      this.see.tab2.table.getdataListParm.parammaps.date = row.date
      this.getSeeTab2List()
    }

  }
}
</script>
<style lang="scss" scoped>
  .search { clear: both;margin-top:10px; }
  .table { margin-top: 10px; }
</style>