<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>

      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-plus"
        @click="handleCreateAdd">
        增加物流档案
      </el-button>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button @click="handleUpdate(row.id)" type="primary" size="mini">
            编辑
          </el-button>
          <el-button @click="editStatus(row.id,'0')" type="danger" v-if="row.enable==1" size="mini">
            禁用
          </el-button>
          <el-button @click="editStatus(row.id,'1')" v-else="row.enable==0" size="mini">
            启用
          </el-button>


        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <el-tag v-if="row.enable==1" type="success">
            启用
          </el-tag>
          <el-tag v-else="row.enable==0" type="danger">
            禁用
          </el-tag>
        </template>
      </el-table-column>
<!--      <el-table-column-->
<!--        label="创建时间"-->
<!--      >-->
<!--        <template slot-scope="scope">-->
<!--          <span v-if="scope.row.createTime">{{scope.row.createTime | getTime}}</span>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column
        prop="logisticTypeName"
        label="物流类型">
      </el-table-column>
      <el-table-column
        prop="logisticName"
        label="物流名称">
      </el-table-column>
      <el-table-column
        prop="contactMan"
        label="联系人">
      </el-table-column>
      <el-table-column
        prop="contactPhone"
        label="联系电话">
      </el-table-column>
      <el-table-column
        prop="carNumber"
        label="车牌号">
      </el-table-column>



    </el-table>
    <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getTableInfo" />

    <el-dialog  :title="dialogTitle" :visible.sync="dialogVisible" width="500px">

      <el-form :model="ruleForm" label-width="130px" :rules="rules" ref="ruleForm" label-position="right">
        <el-form-item prop="logisticTypeName" label="物流类型">
          <el-select v-model="ruleForm.logisticTypeName"  placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.title"
              :value="item.title+','+item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="logisticName" label="物流名称">
          <el-input v-model="ruleForm.logisticName"></el-input>
        </el-form-item>
        <el-form-item prop="contactMan" label="联系人">
          <el-input v-model="ruleForm.contactMan"></el-input>
        </el-form-item>
        <el-form-item prop="contactPhone" label="联系电话">
          <el-input v-model="ruleForm.contactPhone"></el-input>
        </el-form-item>
        <el-form-item prop="carNumber" label="车牌号">
          <el-input v-model="ruleForm.carNumber"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogStatus==='1'?addBtn('ruleForm'):editBtn('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--    <servicedialog @tableRefresh="tableRefresh" ref="menuDialog" :dialogStatus="dialogStatus" :menuId="menuId" :titleDialog="titleDialog" :dialogVisible="dialogVisible"/>-->
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
  </div>
</template>

<script>
  import {getInfo,addInfo,updateInfo,getInfoById} from '@/api/doc/logistics/logistics.js'
  import Cancledialog from '@/components/Dialog/Cancledialog.vue'
  import Pagination from '@/components/Pagination'

  export default {
    components: {
      Cancledialog,Pagination
    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          0: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {

      return {
        byId:"",
        dialogStatus: 1,//1增加，2修改
        dialogTitle: '',
        dialogVisible: false,
        search: {
          keyWord:''
        },
        ruleForm:{
        },
        options:[
          {id:1,title:'物流'},
          {id:2,title:'快递'},
          {id:3,title:'货车'}
        ],
        rules: {
          logisticTypeName: [
            { required: true, message: '请选择物流类型', trigger: 'change' }
          ],
          logisticName: [
            { required: true, message: '请填物流名称', trigger: 'blur' }
          ],
          contactMan: [
            { required: true, message: '请填写联系人', trigger: 'blur' }
          ],
          contactPhone: [
            { required: true, message: '请填写；联系电话', trigger: 'blur' }
          ]
        },
        listData:{
          total:0,
          page: 1,
          pageSize:10
        },
        confirmdialog:false,
        listLoading: false,
        tableData: [],
        menuId:''
      }
    },
    mounted() {
      this.getTableInfo();
    },
    methods: {
      //获取列表
      getTableInfo() {
        const _that = this
        _that.listLoading = true
        var params = _that.search;
        var page = {
          pageIndex:_that.listData.page,
          pageSize: _that.listData.pageSize,
        }
        if(_that.search.keyWord){
          var data = {
            "params": JSON.stringify(params),
            "page": JSON.stringify(page),
          }
        }else {
          var data = {
            "params": {},
            "page": JSON.stringify(page),
          }
        }

        // console.log(data);
        getInfo(data).then(response => {
          // console.log("tableData",response)
          const data = response.data
          // //  组合表单数据
          _that.tableData = data
          _that.listData.total = response.total
          // console.log(_that.tableData)
          _that.listLoading = false
        }).catch(err => {
          _that.listLoading = false
        })
      },
      //增加物流档案
      handleCreateAdd(){
        const _that = this
        _that.ruleForm={
        }
        _that.dialogTitle = '增加物流档案'
        _that.dialogStatus = '1';
        _that.dialogVisible = true;

      },

      //增加
      addBtn(formName){

        const _that = this;
        console.log("_that.ruleForm",_that.ruleForm);
        _that.$refs[formName].validate((valid) => {
          console.log(valid);
          if (valid) {
            // console.log("ruleForm",_that.ruleForm);

            var dataForm = {
              idLogisticType: _that.ruleForm.logisticTypeName.split(",")[1],
              logisticTypeName: _that.ruleForm.logisticTypeName.split(",")[0],

              logisticName: _that.ruleForm.logisticName,
              contactMan: _that.ruleForm.contactMan,
              contactPhone:_that.ruleForm.contactPhone,
              carNumber: _that.ruleForm.carNumber
            }
            console.log("dataForm",dataForm);
            var info =JSON.stringify(dataForm)
            // console.log(info);
            var data = {
              "logisticsInfo": info ,
            }

            // console.log("clientLevel",data);
            addInfo(data).then(res => {
              // console.log(res);
              if(res.httpCode == 200){
                _that.dialogVisible = false
                _that.$message({
                  message: '增加成功',
                  type: 'success'
                });
                _that.tableRefresh();
              }else{
                _that.$message.error(res.msg)
              }
            }).catch(err => {
              _that.$message.error(err)
              _that.dialogVisible = true
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },

      //唤起修改
      handleUpdate(id){
        const _that = this;
        console.log(id);
        _that.dialogTitle = '修改物流档案'
        _that.dialogVisible = true
        _that.dialogStatus = '2';
        _that.byId = id;
        var data= {
          idLogisticsInfo : id
        }

        getInfoById(data).then(res => {
          // console.log(res);
          var datas = res.data;
          // console.log(datas);
          _that.ruleForm={
            id:id,
            idLogisticType: datas.idLogisticType,
            logisticTypeName:datas.logisticTypeName,
            logisticName: datas.logisticName,
            contactMan: datas.contactMan,
            contactPhone:datas.contactPhone,
            carNumber: datas.carNumber
          }

        }).catch(err => {
          _that.$message.error(err)
        })
      },
      //修改档案
      editBtn(formName){
        const _that = this
        console.log(_that.ruleForm.logisticTypeName);
        _that.$refs[formName].validate((valid) => {
          if(_that.ruleForm.logisticTypeName.split(",").length>1){
            var logisticTypeName = _that.ruleForm.logisticTypeName.split(",")[0];
            var idLogisticType = _that.ruleForm.logisticTypeName.split(",")[1];
          }else {
            var logisticTypeName = _that.ruleForm.logisticTypeName;
            var idLogisticType = _that.ruleForm.idLogisticType;
          }

          var dataForm = {
            id:_that.byId,
            idLogisticType: idLogisticType,
            logisticTypeName:logisticTypeName,
            logisticName: _that.ruleForm.logisticName,
            contactMan: _that.ruleForm.contactMan,
            contactPhone:_that.ruleForm.contactPhone,
            carNumber: _that.ruleForm.carNumber
          }
          // console.log("dataFormred",dataForm);
          var info =JSON.stringify(dataForm)
          var data = {
            "logisticsInfo": info,
          }
          // console.log(data);

          updateInfo(data).then(res => {
            // console.log(res);
            if(res.httpCode == 200){
              _that.dialogVisible = false
              _that.$message({
                message: '修改成功',
                type: 'success'
              });
              _that.tableRefresh();
            }else{
              _that.$message.error(res.msg)
            }
          }).catch(err => {
            _that.$message.error(err)
            _that.dialogVisible = true
          })
        })


      },

      //启用禁用
      editStatus(id,status){
        var _that = this;
        var data = {
          id:id,
          enable:status
        }
        var params = {
          "logisticsInfo": JSON.stringify(data),
        }

        var url = '/doc/enableLogisticsInfo';
        _that.$refs.confirmDialog.updataClick(params, url);
      },
      //刷新表格
      tableRefresh(){
        //刷新变革
        this.getTableInfo()
      },

      //搜索
      searchData(){
        this.listData.page = 1;
        this.getTableInfo()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .filter-container {
    margin-bottom: 15px;
  }
</style>
