<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- 搜索条件 -->
      <el-input
        v-model="getdataListParm.parammaps.assetNumber"
        placeholder="资产编号"
        style="width: 120px;"
        class="filter-item"
      />
      <el-input
        v-model="getdataListParm.parammaps.assetName"
        placeholder="资产名称"
        style="width: 120px;"
        class="filter-item"
      />
      <el-input
        v-model="getdataListParm.parammaps.assetType"
        placeholder="设备类别"
        style="width: 120px;"
        class="filter-item"
      />
      <el-select v-model="getdataListParm.parammaps.pastureName" style="width: 120px;" placeholder="牧场" class="filter-item">
        <el-option
          v-for="item in findAllPasture"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
      <el-select v-model="getdataListParm.parammaps.status" style="width: 120px;" clearable placeholder="状态" class="filter-item">
        <el-option
          v-for="item in getDictByName"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="form_search"
      >搜索</el-button>
      <div>
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="primary"
          icon="el-icon-edit"
          @click="form_add"
        >新增</el-button>
        <el-button
          class="filter-item"
          style="margin-left: 10px;"
          type="warning"
          icon="el-icon-edit"
          @click="form_add"
        >导入</el-button>
      </div>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :row-style="rowStyle"
      :cell-style="cellStyle"
      class="elTable"
      :max-height="myHeight"
    >
      <!-- table表格 -->
      <el-table-column label="序号" align="center" type="index" width="50px">
        <template slot-scope="scope">
          <span>{{ scope.$index + (pageNum-1) * pageSize + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="牧场" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.pastureName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="资产编号" min-width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.elecNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备名称" min-width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.elecName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="设备类别" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.assetType }}</span>
        </template>
      </el-table-column>
      <el-table-column label="规格" min-width="80px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.specification }}</span>
        </template>
      </el-table-column>
      <el-table-column label="品牌" min-width="160px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.providerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="80px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status }}</span>
        </template>
      </el-table-column>
      <el-table-column label="财务编号" min-width="130px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.financeNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="责任人" min-width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.employeName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240px" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="{row}">
          <el-button
            type="info"
            size="mini"
            @click="handleCard(row)"
          >卡片</el-button>
          <el-button
            type="success"
            size="mini"
            @click="form_edit(row)"
          >编辑</el-button>
          <el-button
            type="danger"
            size="mini"
            @click="form_delete(row)"
          >删除</el-button>
          <!-- <el-button
            type="danger"
            size="mini"
          >启用</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="getdataListParm.offset"
      :limit.sync="getdataListParm.pagecount"
      @pagination="get_table_data"
    />
    <!-- 弹出层新增or修改 -->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form
        ref="temp"
        :rules="rules"
        :model="temp"
        label-position="right"
        label-width="100px"
        style="width: 800px; margin-left:50px;"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="资产编号" prop="elecNumber">
              <el-input
                ref="elecNumber"
                v-model="temp.elecNumber"
                :disabled="dialogStatus==='card'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称" prop="elecName">
              <el-input
                ref="elecName"
                v-model="temp.elecName"
                :disabled="dialogStatus==='card'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="status">
              <el-select v-model="temp.status" placeholder="状态" class="filter-item" :disabled="dialogStatus==='card'">
                <el-option
                  v-for="item in getDictByName"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="规格" prop="specification">
              <el-input
                ref="specification"
                v-model="temp.specification"
                :disabled="dialogStatus==='card'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="品牌" prop="providerId">
              <el-autocomplete
                v-model="temp.providerName"
                value-key="name"
                class="inline-input"
                :fetch-suggestions="providerSearch"
                placeholder="请输入内容"
                :disabled="dialogStatus==='card'"
                @select="handleSelect"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用途" prop="purpose">
              <el-input ref="purpose" v-model="temp.purpose" :disabled="dialogStatus==='card'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="牧场" prop="pastureId">
              <el-select v-model="temp.pastureId" placeholder="牧场" class="filter-item" :disabled="dialogStatus==='card'">
                <el-option
                  v-for="item in findAllPasture"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="部门" prop="departmentId">
              <el-select v-model="temp.departmentId" placeholder="部门" class="filter-item" :disabled="dialogStatus==='card'">
                <el-option
                  v-for="item in findAllDepart"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" prop="employeId">
              <el-select v-model="temp.employeId" placeholder="负责人" class="filter-item" :disabled="dialogStatus==='card'">
                <el-option
                  v-for="item in findAllEmploye"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="购置日期" prop="purchaseDate">
              <el-date-picker
                v-model="temp.purchaseDate"
                type="date"
                placeholder="选择日期"
                style="width:170px;"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :disabled="dialogStatus==='card'"
              />
              <!-- <el-input ref="deptname" v-model="temp.purchaseDate" @keyup.enter.native="deptenter" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入场日期" prop="entranceDate">
              <el-date-picker
                v-model="temp.entranceDate"
                type="date"
                placeholder="选择日期"
                style="width:170px;"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :disabled="dialogStatus==='card'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="牧场设备编号" prop="equipmentNumber">
              <el-input
                ref="equipmentNumber"
                v-model="temp.equipmentNumber"
                :disabled="dialogStatus==='card'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="年保养费用" prop="yearUpkeepCost">
              <el-input
                ref="yearUpkeepCost"
                v-model="temp.yearUpkeepCost"
                :disabled="dialogStatus==='card'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年维修费用" prop="yearMaintainDost">
              <el-input
                ref="yearMaintainDost"
                v-model="temp.yearMaintainDost"
                :disabled="dialogStatus==='card'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="原值" prop="yuanzhi">
              <el-input ref="yuanzhi" v-model="temp.yuanzhi" :disabled="dialogStatus==='card'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备类别" prop="typeName">
              <el-select v-model="temp.assTypeId" placeholder="设备类别" class="filter-item" :disabled="dialogStatus==='card'">
                <el-option
                  v-for="item in findAllAssetType"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="财务编号" prop="financeNumber">
              <el-input
                ref="financeNumber"
                v-model="temp.financeNumber"
                :disabled="dialogStatus==='card'"
                @keyup.enter.native="deptenter"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="录入时间" prop="inputDatetime">
              <el-date-picker
                v-model="temp.inputDatetime"
                type="date"
                placeholder="录入时间"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                disabled
                style="width:170px;"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-if="dialogStatus==='create'"
          ref="createb"
          type="success"
          @click="add_dialog_save_again()"
        >确认新增</el-button>
        <el-button v-if="dialogStatus !='card'" type="primary" @click="dialogStatus==='create'?add_dialog_save():edit_dialog_save()">确认</el-button>
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入
import { GetDataByName, GetDataByNames, PostDataByName } from '@/api/common'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils/index.js'
// eslint-disable-next-line no-unused-vars
import { validateEMail } from '@/utils/validate.js'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { MessageBox } from 'element-ui'
import Cookies from 'js-cookie'
export default {
  name: 'ElectroData',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      myHeight:document.documentElement.clientHeight - 85- 200,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      requestParam: {
        name: 'insertAsset',
        offset: 0,
        pagecount: 0,
        parammaps: {}
      },
      // 1-2:table&搜索传参
      getdataListParm: {
        name: 'getUseElecList',
        page: 1,
        offset: 1,
        pagecount: 10,
        returntype: 'Map',
        parammaps: {
          assetNumber: '',
          assetName: '',
          pastureName: Cookies.get('pasturename'),
          status: '',
          assetType: ''
        }
      },
      // 2-3：下拉框请求后数据加入[]
      findAllProvider: [],
      findAllAssetType: [],
      findAllPasture: [],
      findAllDepart: [],
      findAllEmploye: [],
      getDictByName: [],
      // 2-1.请求下拉框接口
      requestParams: [
        { name: 'findAllProvider', offset: 0, pagecount: 0, params: [] },
        { name: 'findAllAssetType', offset: 0, pagecount: 0, params: [] },
        { name: 'findAllPasture', offset: 0, pagecount: 0, returntype: 'Map', parammaps: { 'id': Cookies.get('pastureid') }},
        { name: 'findAllDepart', offset: 0, pagecount: 0, parammaps: { 'pastureId': Cookies.get('pastureid') }},
        { name: 'findAllEmploye', offset: 0, pagecount: 0, parammaps: { 'pastureId': Cookies.get('pastureid') }},
        { name: 'getDictByName', offset: 0, pagecount: 0, params: ['资产状态'] }
      ],

      temp: {
        inputDatetime: parseTime(new Date(), '{y}-{m}-{d}'),
        employeId: this.$store.state.user.employeid,
        departmentId: this.$store.state.user.departmentid,
        pastureId: this.$store.state.user.pastureid,
        typeName: '',
        assTypeId: '',
        elecNumber: '',
        elecName: '',
        status: '',
        specification: '',
        providerName: '',
        purpose: '',
        purchaseDate: '',
        entranceDate: '',
        equipmentNumber: '',
        yearUpkeepCost: '',
        yearMaintainDost: '',
        yuanzhi: '',
        financeNumber: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        card: '卡片',
        update: '编辑',
        create: '新增'
      },
      dialogPvVisible: false,
      // 校验规则
      rules: {
        assetNumber: [{ required: true, message: '必填', trigger: 'blur' }
        // 引入自定义校验并使用
          // { validator: validateEMail, trigger: 'blur' }
        ],
        equipmentName: [{ required: true, message: '必填', trigger: 'blur' }]
      },
      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }
    }
  },
  created() {
    this.get_select_list()
    this.get_table_data()
  },

  methods: {
    // 供应商模糊查询
    providerSearch(queryString, cb) {
      var returnList = this.findAllProvider
      var results = queryString ? returnList.filter(this.createFilter(queryString)) : returnList
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return returnValue => {
        return (
          returnValue.name.toLowerCase().indexOf(queryString.toLowerCase()) >= 0
        )
      }
    },
    handleSelect(item) {
      console.log(item)
      this.temp.providerId = item.id
    },
    // 1-1: table&搜索
    get_table_data() {
      this.listLoading = true
      GetDataByName(this.getdataListParm).then(response => {
        this.list = response.data.list
        this.pageNum = response.data.pageNum
        this.pageSize = response.data.pageSize
        if (response.data.total) {
          this.total = response.data.total
        }
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 100)
      })
    },
    // 2-2：下拉框
    get_select_list() {
      GetDataByNames(this.requestParams).then(response => {
        this.findAllProvider = response.data.findAllProvider.list
        this.findAllAssetType = response.data.findAllAssetType.list
        this.findAllPasture = response.data.findAllPasture.list
        this.findAllDepart = response.data.findAllDepart.list
        this.findAllEmploye = response.data.findAllEmploye.list
        this.getDictByName = response.data.getDictByName.list
      })
    },
    form_search() {
      this.listLoading = true
      this.getdataListParm.offset = 1
      this.get_table_data()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    form_reset() {
      this.temp.inputDatetime = parseTime(new Date(), '{y}-{m}-{d}')
      this.temp.typeName = ''
      this.temp.assTypeId = ''
      this.temp.employeId = this.$store.state.user.employeid
      this.temp.departmentId = this.$store.state.user.departmentid
      this.temp.pastureId = this.$store.state.user.pastureid
      this.temp.elecNumber = ''
      this.temp.elecName = ''
      this.temp.status = ''
      this.temp.specification = ''
      this.temp.providerName = ''
      this.temp.purpose = ''
      this.temp.purchaseDate = ''
      this.temp.entranceDate = ''
      this.temp.equipmentNumber = ''
      this.temp.yearUpkeepCost = ''
      this.temp.yearMaintainDost = ''
      this.temp.yuanzhi = ''
      this.temp.financeNumber = ''
    },
    form_add() {
      this.form_reset()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['temp'].clearValidate()
      })
    },
    add_dialog_save() {
      this.$refs['temp'].validate(valid => {
        if (valid) {
          this.requestParam.name = 'insertUseElec'
          this.requestParam.parammaps = this.temp

          PostDataByName(this.requestParam).then(response => {
            console.log(response)
            if (response.msg === 'fail') {
              this.$notify({
                title: '失败',
                message: '保存失败-' + response.data,
                type: 'danger',
                duration: 2000
              })
            } else {
              this.get_table_data()
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '新增成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    },
    form_edit(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['temp'].clearValidate()
      })
    },
    handleCard(row) {
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'card'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['temp'].clearValidate()
      })
    },
    edit_dialog_save() {
      this.$refs['temp'].validate(valid => {
        if (valid) {
          this.requestParam.name = 'updateUseElec'
          this.requestParam.parammaps = this.temp
          PostDataByName(this.requestParam).then(response => {
            console.log(response)
            if (response.msg === 'fail') {
              this.$notify({
                title: '失败',
                message: '保存失败-' + response.data,
                type: 'warning',
                duration: 2000
              })
            } else {
              this.get_table_data()
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
              })
            }
          })
        }
      })
    },
    form_delete(row) {
      MessageBox.confirm('设备名称：' + row.elecName, '确认删除？', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.requestParam.name = 'deleteUseElec'
        this.requestParam.parammaps = {}
        this.requestParam.parammaps['id'] = row.id
        PostDataByName(this.requestParam).then(() => {
          this.get_table_data()
          this.dialogFormVisible = false
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  // .filter-container .filter-item{width: 120px;}
  // button .filter-container .filter-item{width: 100px;}
</style>
