<template>
  <div class="manage-main">
    <div class="manage-main-top">
      <Button icon="ios-add" class="common-add-btn" @click="addClick">新增线路</Button>
    </div>
    <div class="manage-main-center">
      <Table :columns="columns" :data="tableData" class="common-table" no-data-text="" :row-class-name="rowClassName" :loading="loading">
        <template slot="loading">
            <Loading-animation></Loading-animation>
        </template>
         <template slot-scope="{ row }" slot="action">
           <Tooltip content="详情" placement="top">
              <i class="iconfont icon-xiangqingmingxi" style="cursor:pointer;color:#B8B532;fontSize:20px;marginRight:6px" @click="detailClick(row)"></i>
           </Tooltip>
           <Tooltip content="编辑" placement="top">
              <i class="iconfont icon-bianji" style="cursor:pointer;color:#64ACFE;fontSize:20px;marginRight:6px" @click="editClick(row)"></i>
           </Tooltip>
           <Tooltip content="删除" placement="top">
              <i class="iconfont icon-shanchu" style="cursor:pointer;color:#E92E2E;fontSize:20px;marginRight:6px" @click="delClick(row)"></i>
           </Tooltip>
        </template>
      </Table>
    </div>
    <div class="common-page">
      <div class="common-page-total">
        共<span>{{tablePage}}</span>页 / <span>{{tableTotal}}</span>条数据
      </div>
      <Page :total="tableTotal" :current="tableParams.pageNum" :page-size="tableParams.pageSize" @on-change="changePage" @on-page-size-change="sizeChange" show-elevator />
    </div>
    <Modal
      v-model="showModal"
      :title="title"
      width="40"
      ref="modalGrag"
      draggable
      reset-drag-position
      @on-visible-change="modalChange"
      :mask-closable="false"
      class-name="common-modal">
      <Form class="common-form" ref="formOption" :model="formOption" :rules="ruleValidate" :label-width="120">
				<FormItem label="上级节点：">
          <span>合肥轨道交通</span>
				</FormItem>
				<FormItem label="线路名称：" prop="lineName">
          <Input v-model.trim="formOption.lineName" maxlength="20" show-word-limit />
        </FormItem>
        <FormItem label="线路序号：" prop="lineSerial">
          <InputNumber :max="99" :min="1" v-model="formOption.lineSerial" placeholder="请输入1~99，序号越小显示越靠前"></InputNumber>
        </FormItem>
        <FormItem label="线路类型：" prop="lineType">
           <Select v-model="formOption.lineType" placeholder="请选择线路类型">
              <Option v-for="item in lineTypeData" :value="item.id" :key="item.id">{{ item.value }}</Option>
          </Select>
        </FormItem>
        <FormItem label="线路长度(km)：" prop="lineLength">
          <InputNumber v-model="formOption.lineLength" placeholder="保留2位小数" :min="0" :precision="2" :active-change="false"></InputNumber>
        </FormItem>
        <FormItem label="运营机构：" prop="operatingGroup">
          <Input v-model="formOption.operatingGroup" maxlength="20" show-word-limit />
        </FormItem>
        <FormItem label="说明：" prop="remark">
          <Input v-model="formOption.remark" type="textarea" :rows="6" maxlength="200" show-word-limit />
        </FormItem>
        <FormItem label="启用状态：" prop="enabled" v-if="title == '新增线路'">
          <i-switch true-color="#57C44F" v-model="formOption.enabled" disabled></i-switch>
          <span style="color: #718EBD;margin-left:6px">关</span>
          <span style="color: #718EBD;margin-left:12px">（所有新增线路均为关闭，需在列表打开）</span>
        </FormItem>
			</Form>
      <div slot="footer">
          <Button @click="modalCancel">取消</Button>
          <Button type="primary" @click="modalOk('formOption')">确定</Button>
        </div>
    </Modal>
    <Modal
      v-model="modalStatus"
      :title="commonTitle"
      width="25"
      ref="modalGrag"
      draggable
      reset-drag-position
      :mask-closable="false"
      class-name="common-modal">
      <i :class="'iconfont '+ activeClass" :style="{ color: activeColor}" class="modal-icon" v-show="commonTitle!='确认删除'"></i>
      <Icon type="ios-information-circle" :style="{ color: activeColor}" class="modal-icon" v-show="commonTitle=='确认删除'"></Icon>
      <span class="modal-text">{{modalTitle}}</span>
      <div slot="footer">
          <Button @click="commonCancel">取消</Button>
          <Button type="primary" @click="commonOk">确定</Button>
        </div>
    </Modal>
    <Modal
      v-model="detailStatus"
      title="线路详情"
      width="45"
      ref="modalGrag"
      draggable
      reset-drag-position
      footer-hide
      :mask-closable="false"
      class-name="common-modal">
      <div v-for="(item,index) in detailLabel" :key="index">
        <div class="common-modal-top">
        <span class="common-modal-top-text">{{item.name}}</span>
        </div>
        <div class="common-modal-content">
          <div class="modal-content-item" v-for="(val,i) in item.value" :key="i" :class="{'item-especial': val.name == '说明' && item.value.length%2!=0,'item-especial-bot':(i==item.value.length-1 || i==item.value.length-2) && item.value.length%2==0}">
            <div class="modal-content-item-name">
            {{val.name}}
            </div>
            <div class="modal-content-item-value"> 
              <Tooltip placement="top-start" transfer max-width="350" v-if="val.value || val.value===0">
                <span v-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
                <span v-else>{{val.value}}</span>
                <div slot="content">
                  <span v-if="val.name == '启用状态'">{{val.value==1 ? '启用' : '关闭'}}</span>
                  <span v-else>{{val.value}}</span>
                </div>
              </Tooltip>
              <span v-else>{{val.value}}</span>
            </div>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
const defaultFrom = {lineName: '',lineSerial: null,lineType:null, lineLength:null,operatingGroup:'',remark:'',enabled:0}
export default {
  name: "LineManage",
  data() {
    return {
      rowObj: {},
      loading: true,
      tableParams: {
        lineName: '',
        pageNum: 1,
        pageSize: 10
      },
      tableTotal: 0,
      tablePage: 0,
      tableData: [],
      showModal: false,
      detailStatus: false, 
      modalStatus: false,
      title: '新增线路',
      commonTitle: "确认删除",
      activeColor: '#E92E2E',
      activeClass: '',
      modalTitle: '',
      formOption: {lineName: '',lineSerial: null,lineType:null, lineLength:null,operatingGroup:'',remark:'',enabled:0},
      ruleValidate: {
        lineName: [{
          required: true,
          message: '请输入线路名称',
          trigger: 'blur'
        }],
        lineSerial: [{
          required: true,
          type:'number',
          message: '请输入线路序号',
          trigger: 'blur'
        }]
      }, 
      lineTypeData: [],
      columns: [
        {
          title: '线路序号',
          key: 'lineSerial',
          align: 'center',
          width: 100,
        },
        {
          title: '线路名称',
          key: 'lineName',
          align: 'center',
          ellipsis: true,
          tooltip: true
          // width: 100,
        },
        {
          title: '当前线路长度（km)',
          key: 'lineLength',
          align: 'center',
        },
        {
          title: '站点数量',
          key: 'stationCount',
          align: 'center',
        },
        {
          title: '运营机构',
          key: 'operatingGroup',
          align: 'center',
          ellipsis: true,
          tooltip: true
        },
        {
          title: '线路类型',
          key: 'lineTypeValue',
          align: 'center',
        },
        {
          title: '启用状态',
          key: 'enabled',
          align: 'center',
          width: 120,
          render: (h, params) => {
            return h('div', [                             
              h('i-switch', {
                props: { value: params.row.enabled,'true-color': '#57C44F', trueValue:1,falseValue: 0
                },
                nativeOn:{
                    "mousedown":(event)=>{ // 监听组件原生事件mousedown,此事件在click之前触发
                      this.rowObj =  params.row
                      if (params.row.enabled == 1) {
                        this.commonTitle = '确认关闭'
                        this.activeColor = '#E92E2E'
                        this.activeClass = 'icon-guanbi'
                        this.modalTitle = '关闭后线路下所有站点将同时关闭，线路及站点统计数据不可见。'
                        this.modalStatus = true         
                      } else {
                        this.commonTitle = '确认启用'
                        this.activeColor = '#57C44F'
                        this.activeClass = 'icon-qiyong'
                        this.modalTitle = '启用后此线路统计数据将在各管理模块及前端显示页面生效。'
                        this.modalStatus = true
                      }
                    },
                  }
              }),
            ])
            }
        },
        {
          title: '操作',
          align: 'center',
          slot: 'action',
          width: 120,
        }
      ],
      detailLabel: []
    };
  },
  mounted() {
    this.getLineType()
  },
  methods: {
    // formatter(VauleNumber){
    //   console.log(VauleNumber)
    //   let num = VauleNumber.toFixed(2)
    //   return num;
    // },
    rowClassName(row, index) {
      if (index % 2 == 0) {
        return "ivu-table-stripe-even";
      } else {
        return "ivu-table-stripe-odd";
      }
    },
    // 分页
    changePage (val) {
      this.tableParams.pageNum = val
      this.getTableData()
    },
    //跳转
    sizeChange (val) {
      this.tableParams.pageSize = val
      this.getTableData()
    },
    // 获取线路类型
    getLineType  () {
      this.$get('metroapi/dic/queryDictionary', {name:'线路类型'}).then(res=>{
        if (res.httpCode == 1 ){
          this.lineTypeData = res.data
        } else {
          this.lineTypeData = []
        }
      })
    },
    addClick () {
      this.formOption = JSON.parse(JSON.stringify(defaultFrom))
      this.title = '新增线路'
      this.showModal = true
    },
    detailClick (row) {
      this.$get('metroapi/lineStation/lineDetail', {lineId:row.id}).then(res=>{
        if ( res.httpCode == 1 ){
          this.detailLabel = res.data
        } else {
          this.$Message.info(res.msg)
        }
      })   
      this.rowObj = row
      this.detailStatus = true
    },
    editClick (row) {
      this.rowObj = row
      this.formOption = JSON.parse(JSON.stringify(row));
      this.formOption.lineSerial = Number(this.formOption.lineSerial)
      this.formOption.lineLength = this.formOption.lineLength ? Number(this.formOption.lineLength):null;
      this.title = '编辑线路'
      this.showModal = true
    },
    delClick (row) {
      this.rowObj = row
      this.commonTitle = '确认删除'
      this.activeColor = '#E92E2E'
      this.activeClass = ''
      this.modalTitle = '只能删除没有站点的线路，删除不影响已产生的操作和记录。'
      this.modalStatus = true
    },
    //获取表格数据
    getTableData () {
      this.loading = true
      this.$get('metroapi/lineStation/queryLinePage', this.tableParams).then(res=>{
        this.loading = false
          if (res.httpCode == 1 ){
            this.tableData = res.data.data
            this.tableTotal = res.data.count
            if (res.data.data.length==0) {
              this.tablePage = 0
            } else {
              this.tablePage = res.data.count<= 10 ? 1: Math.ceil(res.data.count/this.tableParams.pageSize)
            }
            if (res.data.data.length==0 && this.tableParams.pageNum>1) {
              this.tableParams.pageNum--
              return this.getTableData()
            }
          } else {
            this.tableData = []
            this.tableTotal = 0
            this.$Message.info(res.msg)
          }
        })
    },
    modalChange (modalStatus) {
     if (!modalStatus) {
      this.$refs.formOption.resetFields();
     }
    },
    modalOk (formName) {
      let params = JSON.parse(JSON.stringify(this.formOption))
      params.lineLength = params.lineLength ? params.lineLength.toFixed(2):params.lineLength
      if (this.title == '新增线路') {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$post('metroapi/lineStation/addLine', params).then(res=>{
              if ( res.httpCode == 1 ){
                this.showModal = false
                this.$Message.info(res.msg)
                this.getTableData()
              } else {
                this.$Message.info(res.msg)
              }
            })
          } else {
            this.showModal = true
          }
       })
      } else {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$post('metroapi/lineStation/editLine', params).then(res=>{
              if ( res.httpCode == 1 ){
                this.showModal = false
                this.$Message.info(res.msg)
                this.getTableData()
              } else {
                this.$Message.info(res.msg)
              }
            })
          } else {
            this.showModal = true
          }
       })
      }
    },
    modalCancel () {
      this.showModal = false
    },
    commonOk () {
      if (this.commonTitle == '确认启用') {
        let params = {
          lineId: this.rowObj.id,
          enabled: 1
        }
        this.getSwitchStatus(params)
      } else if (this.commonTitle == '确认关闭') {
        let params = {
          lineId: this.rowObj.id,
          enabled:0
        }
        this.getSwitchStatus(params)
      } else {
        let params = {
          lineId: this.rowObj.id
        }
        this.delData(params)
      }
    },
    commonCancel () {
      this.modalStatus = false
    },
    // 启用 关闭/接口
    getSwitchStatus (params) {
      this.$get('metroapi/lineStation/enableLine',params).then(res=>{
        if (res.httpCode == 1 ){
          if (params.enabled == 0) {
            this.rowObj.enabled = 0
          } else {
            this.rowObj.enabled = 1
          }
          this.modalStatus = false
        } else {
          this.rowObj.enabled = 0
          this.$Message.info(res.msg)
        }
      })
    },
    // 删除 关闭/接口
    delData (params) {
      this.$get('metroapi/lineStation/delLine',params).then(res=>{
        if (res.httpCode == 1 ){
          this.modalStatus = false
          this.getTableData()
        } else {
          this.$Message.info(res.msg)
        }
      })
    },
  }
};
</script>
<style scoped lang="stylus">
.manage-main {
 width: 100%;
 height: calc(100% - 50px);
 display: flex;
 flex-direction: column;
 position: relative;
}
.manage-main-top {
  padding: 12px 0;
  display: flex;
  justify-content: flex-end;
}
.manage-main-center {
  width: 100%;
  height: calc(100% - 100px);
  position: relative;
}
.common-table {
  max-height: 100%;
}
>>> .common-table .ivu-table th {
  height: 52px;
 }
 >>> .common-table .ivu-table td {
  height: 55px;
 }
 >>> .common-table .ivu-spin-fix {
   top: 52px;
   height: calc(100vh - 338px);
 }
 >>> .common-table .ivu-table-tip {
  height: calc(100vh - 338px);
  background: url('../../../assets/images/noData.png') no-repeat center;
}
>>> .common-table .ivu-table-tip table {
 display: none;
}
.common-page {
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  bottom: 0;
  right: 0;
}
.common-page-total {
  color: #fff;
  padding-right: 10px;
  font-size: 14px; 
  span {
    color #409EFF;
  }
}
/* 对话框里的input里的placeholder样式修改 */
/deep/ .ivu-input::-webkit-input-placeholder , /deep/ .ivu-input-number-input::-webkit-input-placeholder{
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{   /* Mozilla Firefox 19+ */
  color: #718EBD;
}
/deep/ .ivu-input::-moz-placeholde, /deep/ .ivu-input-number-input::-webkit-input-placeholderr{    /* Mozilla Firefox 4 to 18 */
 color: #718EBD;
}
/deep/ .ivu-input::-ms-input-placeholder, /deep/ .ivu-input-number-input::-webkit-input-placeholder{  /* Internet Explorer 10-11 */
  color: #718EBD;
}
>>> .common-modal-top-text {
  font-size: 14px;
  font-weight: bold;
  color: #29A0FF;
  line-height: 42px;
  border-left: 3px solid #1590F1;
  padding-left: 12px;
}
>>> .common-modal-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 15px;
  border-right: 1px solid #21437B;
}
>>> .modal-content-item {
  width: 50%;
  display: flex;
}
>>> .item-especial {
  width: 100%;
}
>>> .modal-content-item-name {
  width: 50%;
  height: 45px;
  line-height: 45px;
  background: #13305F;
  border-top: 1px solid #21437B;
  border-left: 1px solid #21437B;
  font-size: 14px;
  color: #F5F5F5;
  padding-left: 20px;
}
>>> .modal-content-item-value {
  width: 50%;
  height: 45px;
  line-height: 45px;
  background: #06214D;
  border-top: 1px solid #21437B;
  border-left: 1px solid #21437B;
  font-size: 14px;
  color: #F5F5F5;
  padding-left: 20px;
  overflow: hidden;
}
>>> .item-especial .modal-content-item-name{
  width: 25%;
  border-bottom: 1px solid #21437B;
}
>>> .item-especial .modal-content-item-value{
  width: 75%;
  border-bottom: 1px solid #21437B;
}
>>> .item-especial-bot .modal-content-item-name {
  border-bottom: 1px solid #21437B;
}
>>> .item-especial-bot .modal-content-item-value {
  border-bottom: 1px solid #21437B;
}
>>> .modal-content-item-value .ivu-tooltip {
  width: 100%;
}
>>> .modal-content-item-value .ivu-tooltip-rel {
  overflow: hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
}
</style>