<template>
  <div class="app-container">
    <div class="table1">
      <div class="search">
        <el-input v-model="table1.parammaps.card" placeholder="SIM卡号" style="width: 180px;" class="filter-item" clearable />
        <el-select v-model="table1.parammaps.company" filterable placeholder="公司" class="filter-item" style="width: 150px;" clearable>
          <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.name" />
        </el-select>
        <el-select v-model="table1.parammaps.status" filterable placeholder="启用状态" class="filter-item" style="width: 150px;" clearable>
          <el-option v-for="item in enableStatusList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
        <el-button class="successBorder" @click="handleSearch1">查询</el-button>
        <el-button class="successBorder" @click="handleRefresh1">重置</el-button>
      </div>
      <div class="operation">
        <el-button  class="success" icon="el-icon-plus" @click="clickCreate">新增</el-button>
      </div>
      <div class="table">
        <el-table
          :key="table1.tableKey"
          v-loading="table1.listLoading"
          element-loading-text="给我一点时间"
          :data="table1.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 v-if="table1.pageNum">{{ scope.$index + (table1.pageNum-1) * table1.pageSize + 1 }}</span>
              <span v-else>1</span>
            </template>
          </el-table-column>
          <el-table-column label="SIM卡号" min-width="60px" align="center" prop="card" />
          <el-table-column label="总流量" min-width="60px" align="center" prop="totalflow" />
          <el-table-column label="已用流量" min-width="60px" align="center" prop="used" />
          <el-table-column label="剩余流量" min-width="60px" align="center" prop="remaining" />
          <el-table-column label="公司" min-width="60px" align="center" prop="company" />
          <el-table-column label="购入日期" min-width="60px" align="center" prop="purchasedate" />
          <el-table-column label="激活日期" min-width="60px" align="center" prop="activatedate" />
          <el-table-column label="充值日期" min-width="60px" align="center" prop="topupdate" />
          <el-table-column label="结束日期" min-width="60px" align="center" prop="enddate" />
          <el-table-column label="启用状态" min-width="60px" align="center" prop="status">
            <template slot-scope="{row}">
              <span v-if="row.status == '1'">已启用</span>
              <span v-else>未启用</span>
            </template>
          </el-table-column>
          <el-table-column label="接收器编号" min-width="60px" align="center" prop="receivercode" />
          <el-table-column label="接收器牧场" min-width="60px" align="center" prop="pasturename" />
          <el-table-column label="接收器牧场编号" min-width="60px" align="center" prop="pasturecode" />
          <el-table-column label="接收器牛舍" min-width="60px" align="center" prop="barname" />
          <el-table-column label="操作" min-width="60px" align="center">
            <template slot-scope="{row}">
              <a @click="clickEdit(row)" style="text-decoration: underline;color: #0000FF;">编辑</a>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="table1.total>0" :total="table1.total" :page.sync="table1.offset" :limit.sync="table1.pagecount" @pagination="getList1" />
      </div>
    </div>

    <!-- 编辑 -->
    <el-dialog  :title="textMap[edit.dialogStatus]"  :visible.sync="edit.dialogFormVisible" :close-on-click-modal="false" width="50%">
      <div class="edit">
        <el-form ref="temp" :rules="edit.rules" :model="edit.temp" label-position="right" label-width="150px" style="width: 100%;margin:0 auto 50px">
          <el-row>
            <el-col :span="16">
              <el-form-item label="启用状态:" prop="status">
                <el-switch v-model="edit.temp.status" active-value="1" inactive-value="0" @change="changeStatus"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="SIM卡号:" prop="card">
                <el-input v-model="edit.temp.card" placeholder="SIM卡号" style="width: 100%;" class="filter-item" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="公司:" prop="company">
              <el-select v-model="edit.temp.company" filterable placeholder="公司" class="filter-item" style="width: 100%;">
                <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.name" />
              </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="购入日期:" prop="purchasedate">
                <el-date-picker v-model="edit.temp.purchasedate" type="date" placeholder="购入日期" style="width: 100%;" class="filter-item" :clearable="false"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="激活日期:" prop="activatedate">
                <el-date-picker v-model="edit.temp.activatedate" type="date" placeholder="激活日期" style="width: 100%;" class="filter-item" :clearable="false"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="充值日期:" prop="topupdate">
                <el-date-picker v-model="edit.temp.topupdate" type="datetime" placeholder="充值日期" style="width: 100%;" class="filter-item" :clearable="false"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="结束日期:" prop="enddate">
                <el-date-picker v-model="edit.temp.enddate" type="date" placeholder="结束日期" style="width: 100%;" class="filter-item" :clearable="false"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="接收器编号:" prop="receivercode">
                <el-select v-model="edit.temp.receivercode" filterable placeholder="接收器编号" class="filter-item" style="width: 100%;" @change="changeReceiver">
                  <el-option v-for="item in receiverList" :key="item.id" :label="item.code" :value="item.code" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="接收器牧场:" prop="pasturename">
                <el-input v-model="edit.temp.pasturename" placeholder="接收器牧场" style="width: 100%;" class="filter-item" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="接收器牧场编号:" prop="pasturecode">
                <el-input v-model="edit.temp.pasturecode" placeholder="接收器牧场编号" style="width: 100%;" class="filter-item" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item label="接收器牛舍:" prop="barname">
                <el-input v-model="edit.temp.barname" placeholder="接收器牛舍" style="width: 100%;" class="filter-item" disabled/>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="bottom: 10px;">
        <el-button class="save" :disabled="isokDisable" @click="edit.dialogStatus =='createTxt'?createData():editData()">确认</el-button>
        <el-button class="cancelClose" @click="edit.dialogFormVisible = false; ">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import { postJson,getJson } from '@/api/common'
  import Cookies from 'js-cookie'
  import { parseTime } from '@/utils/index.js'
  export default {
    name: 'SimCard',
    components: { Pagination },
    data() {
      return {
        companyList:[{id:'1',name:'移动'},{id:'2',name:'联通'},{id:'3',name:'电信'}],
        enableStatusList:[{id:1,name:'已启用'},{id:0,name:'未启用'}],
        receiverList:[],//接收器管理
        table1:{
          parammaps: {status: '', card:'',company:''},
          offset: 1, pagecount: parseInt(Cookies.get('pageCount')),pageNum:'',pageSize:'',total: 0, listLoading: true, tableKey: 0, list: []
        },
        edit:{
          dialogStatus: '',
          dialogFormVisible: false,
          rules:{
            card: [{ type: 'string', required: true, message: '必填', trigger: 'change' }],
          },
          temp:{}
        },
        isokDisable:false,
        textMap: {
          editTxt: '编辑',
          createTxt:'新增'
        },
        rowStyle: { maxHeight: 30 + 'px', height: 30 + 'px' },
        cellStyle: { padding: 0 + 'px' }
      }
    },

    created() {
      this.getList1()
      this.getReceiverList()
    },
    methods: {
      getList1() {
        this.table1.listLoading = true
        let status = ''
        if(this.table1.parammaps.status === '' || this.table1.parammaps.status === null){
          status = -1
        }else{
          status = this.table1.parammaps.status
        }
        let data = 'index=' + this.table1.offset
        + '&pagesize=' + this.table1.pagecount
        + '&company=' + this.table1.parammaps.company
        + '&card=' + this.table1.parammaps.card
        + '&status=' + status

        let url = 'sim/list?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.table1.list = response.data.list
            this.table1.pageNum = this.table1.offset
            this.table1.pageSize = this.table1.pagecount
          } else {
            this.table1.list = []
          }
          this.table1.total = response.data.total
          setTimeout(() => {
            this.table1.listLoading = false
          }, 100)
        })
      },
      getReceiverList() {
        let data = 'index=' + 1
        + '&pagesize=' + ''
        let url = 'receiver/pull?'
        getJson(url,data).then(response => {
          if (response.code == 200) {
            this.receiverList = response.data.list
          }else{
            this.receiverList = []
          }
        })
      },
      handleSearch1(){
        this.table1.offset = 1
        this.getList1()
      },
      handleRefresh1(){
        this.table1.offset = 1
        this.table1.parammaps = {
          status: '', card:'',company:'',
        }
        this.getList1()
      },
      clickCreate(){
        console.log('新增')
        this.edit.dialogFormVisible = true
        this.edit.dialogStatus = 'createTxt'
        this.edit.temp = {
          status:'0',
          card:'',
          company:'移动',
          purchasedate:'',
          activatedate:'',
          topupdate:'',
          enddate:'',
          receiverid:'',
          pasturename:'',
          pasturecode:'',
          barname:''
        }
      },
      changeReceiver(item){
        console.log(item)
        this.edit.temp.receiverid = this.receiverList.find(obj => obj.code == item).id
        this.edit.temp.receivercode = this.receiverList.find(obj => obj.code == item).code
        this.edit.temp.pasturename = this.receiverList.find(obj => obj.code == item).pasturename
        this.edit.temp.pasturecode = this.receiverList.find(obj => obj.code == item).pasturecode
        this.edit.temp.barname = this.receiverList.find(obj => obj.code == item).barname
        this.edit.temp.barid = this.receiverList.find(obj => obj.code == item).barid
      },
      createData(){
        console.log('新增保存')
        this.isokDisable = true
        setTimeout(() => {
          this.isokDisable = false
        }, 3000)
        this.$refs['temp'].validate(valid => {
          if (valid) {
            let purchasedate = ''
            if(this.edit.temp.purchasedate !== ''){
              purchasedate =parseTime(this.edit.temp.purchasedate, '{y}-{m}-{d}')
            }else{
              purchasedate = ''
            }
            let activatedate = ''
            if(this.edit.temp.activatedate !== ''){
              activatedate =parseTime(this.edit.temp.activatedate, '{y}-{m}-{d}')
            }else{
              activatedate = ''
            }
            let topupdate = ''
            if(this.edit.temp.topupdate !== ''){
              topupdate =parseTime(this.edit.temp.topupdate, '{y}-{m}-{d} {h}:{i}:{s}')
            }else{
              topupdate = ''
            }
            let enddate = ''
            if(this.edit.temp.enddate !== ''){
              enddate = parseTime(this.edit.temp.enddate, '{y}-{m}-{d}')
            }else{
              enddate = ''
            }
            let data = {
              status:this.edit.temp.status,
              card:this.edit.temp.card,
              company:this.edit.temp.company,
              barid:this.edit.temp.barid,
              purchasedate:purchasedate,
              activatedate:activatedate,
              topupdate:topupdate,
              enddate:enddate,
              receiverid:this.edit.temp.receiverid
            }
            let url = 'sim/add'
            postJson(url,data).then(response => {
              if (response.code == 200) {
                this.$notify({ title: '', message: '保存成功', type: 'success', duration: 2000 })
                this.edit.dialogFormVisible = false
                this.getList1()
              }else{
                this.$notify({ title: '保存失败', message: response.data, type: 'warning', duration: 2000 })
              }
            })
          }
        })
      },
      clickEdit(row){
        console.log('编辑')
        row.status = String(row.status)
        row.receiverid = row.receiverid
        row.receivercode = row.receivercode
        this.edit.temp = Object.assign({}, row)
        this.edit.dialogFormVisible = true
        this.edit.dialogStatus = 'editTxt'
      },
      editData(){
        console.log('编辑保存')
        this.isokDisable = true
        setTimeout(() => {
          this.isokDisable = false
        }, 3000)
        this.$refs['temp'].validate(valid => {
          if (valid) {
            console.log(this.edit.temp,'this.edit.temp')
            let purchasedate = ''
            if(this.edit.temp.purchasedate !== ''){
              purchasedate =parseTime(this.edit.temp.purchasedate, '{y}-{m}-{d}')
            }else{
              purchasedate = ''
            }
            let activatedate = ''
            if(this.edit.temp.activatedate !== ''){
              activatedate =parseTime(this.edit.temp.activatedate, '{y}-{m}-{d}')
            }else{
              activatedate = ''
            }
            let topupdate = ''
            if(this.edit.temp.topupdate !== ''){
              topupdate =parseTime(this.edit.temp.topupdate, '{y}-{m}-{d} {h}:{i}:{s}')
            }else{
              topupdate = ''
            }
            let enddate = ''
            if(this.edit.temp.enddate !== ''){
              enddate = parseTime(this.edit.temp.enddate, '{y}-{m}-{d}')
            }else{
              enddate = ''
            }
            let data = {
              status:this.edit.temp.status,
              card:this.edit.temp.card,
              barid:this.edit.temp.barid,
              company:this.edit.temp.company,
              purchasedate:purchasedate,
              activatedate:activatedate,
              topupdate:topupdate,
              enddate:enddate,
              receiverid:this.edit.temp.receiverid,
              id:this.edit.temp.id,
            }
            let url = 'sim/edit'
            postJson(url,data).then(response => {
              if (response.code == 200) {
                this.$notify({ title: '', message: '保存成功', type: 'success', duration: 2000 })
                this.edit.dialogFormVisible = false
                this.getList1()
              }else{
                this.$notify({ title: '保存失败', message: response.data, type: 'warning', duration: 2000 })
              }
            })
          }
        })
      },
      changeStatus(item){
        console.log(this.edit.temp.receivercode)
        if(this.edit.temp.receivercode !== '' && this.edit.temp.receivercode !== undefined && this.edit.temp.receivercode !== null){
          if(item == 0){
            this.$message.warning('关闭SIM卡后，该卡将与（接收器编号）自动解绑')
          }
        }
      }
    }
  }
</script>

<style>
</style>
