<template>
  <div class="col-sm-12" style="margin: 20px 0px;">
    <data-grid :model="model" v-ref:grid class="list_area table_sy" style="padding: 0px">
      <template partial='head'>
        <tr>
          <th class="textNoLineBreak">序号</th>
          <th class="textNoLineBreak">支干线</th>
          <th class="textNoLineBreak">管径</th>
          <th class="textNoLineBreak">管材</th>
          <th class="textNoLineBreak">起点</th>
          <th class="textNoLineBreak">终点</th>
          <th class="textNoLineBreak">长度</th>
          <th class="textNoLineBreak">
            <button
              type="button"
              class="btn btn-info head-but"
              @click="$parent.$parent.showGuanXianModal()"
              :disabled="$parent.$parent.mark===1"
            >新增线路</button>
          </th>
        </tr>
      </template>
      <template partial='body'>
        <tr>
          <td style="text-align: center;">
            <nobr>{{$index+1}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_branch_trunk}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_pipe_diameter}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_pipe_material}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_starting_point}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_end_point}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>{{row.f_pipe_length}}</nobr>
          </td>
          <td style="text-align: center;">
            <nobr>
              <button
                type="button"
                name="button"
                class="btn btn-link"
                @click="$parent.$parent.showGuanXianModal(row)"
                :disabled="$parent.$parent.mark===1"
              >修改</button>

              <button
                type="button" name="button" class="btn btn-link"
                @click="$parent.$parent.deleteXianLu(row)"
                :disabled="$parent.$parent.mark===1"
              >删除</button>

            </nobr>
          </td>
        </tr>
      </template>
    </data-grid>

    <validator name="v">
      <modal v-if="showGuanXian" :show.sync="showGuanXian" v-ref:modal :large="true" :backdrop="false" title="管线明细">
        <header slot="modal-header" class="modal-header">
          <button type="button" class="close" @click="closeModal"><span>&times;</span></button>
          <h4 class="modal-title">管线明细</h4>
        </header>
        <article slot="modal-body" class="modal-body clearfix">
          <div class="form-group col-sm-6" :class="[$v.f_branch_trunk.required ? 'has-error' : '']">
            <label class="col-sm-4 control-label">支干线：</label>
            <div class="col-sm-8">
              <input type="text" v-show="false" v-model="guanXian.f_branch_trunk" v-validate:f_payment_method = "['required']" >
              <input-select
                placeholder='请选择' width="100%"
                v-model="guanXian.f_branch_trunk"
                :value.sync="guanXian.f_branch_trunk"
                :options='branchTrunks'
                class="select select_list"
                :value-single="true"
                close-on-select ></input-select>
            </div>
          </div>
          <div class="form-group col-sm-6" :class="[$v.f_pipe_diameter.required ? 'has-error' : '']">
            <label class="col-sm-4 control-label">管径：</label>
            <div class="col-sm-8">
              <input type="text" v-show="false" v-model="guanXian.f_pipe_diameter" v-validate:f_payment_method = "['required']" >
              <input-select
                placeholder='请选择' width="100%"
                v-model="guanXian.f_pipe_diameter"
                :value.sync="guanXian.f_pipe_diameter"
                :options='pipeDiameters'
                class="select select_list"
                :value-single="true"
                close-on-select ></input-select>
            </div>
          </div>
          <div class="form-group col-sm-6" :class="[$v.f_pipe_material.required ? 'has-error' : '']">
            <label class="col-sm-4 control-label">管材：</label>
            <div class="col-sm-8">
              <input type="text" v-show="false" v-model="guanXian.f_pipe_material" v-validate:f_payment_method = "['required']" >
              <input-select
                placeholder='请选择' width="100%"
                v-model="guanXian.f_pipe_material"
                :value.sync="guanXian.f_pipe_material"
                :options='pipeMaterial'
                class="select select_list"
                :value-single="true"
                close-on-select ></input-select>
            </div>
          </div>
          <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">长度：</label>
            <div class="col-sm-8">
              <input type="text" class="form-control input_view" style="width: 100%; height: 90%"
                     v-model="guanXian.f_pipe_length" />
            </div>
          </div>
          <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">起点：</label>
            <div class="col-sm-8">
              <input type="text" class="form-control input_view" style="width: 100%"
                     v-model="guanXian.f_starting_point" />
            </div>
          </div>
          <div class="form-group col-sm-6">
            <label class="col-sm-4 control-label">终点：</label>
            <div class="col-sm-8">
              <input type="text" class="form-control input_view" style="width: 100%"
                     v-model="guanXian.f_end_point" />
            </div>
          </div>
        </article>
        <footer slot="modal-footer" class="modal-footer">
          <button type="button" class="btn btn-primary" :disabled='!$v.valid' @click="saveXianLu()">保存线路</button>
        </footer>
      </modal>
    </validator>

  </div>
</template>

<script>
import {HttpResetClass} from "vue-client";
import Vue from 'vue'

export default {
  title: '线路明细',
  props: {
    selectdata: {
      type: Object
    },
    mark: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      showGuanXian: false,  // 展示支线明细
      model: {
        data: null
      },       // 记录
      branchTrunks: [{label: '支线', value: '支线'}, {label: '干线', value: '干线'}],
      pipeDiameters: [...this.$appdata.getParam('管径')],
      pipeMaterial: [...this.$appdata.getParam('管材')],
      guanXian: {

      }
    }
  },
  ready () {
    this.search()
  },
  methods: {
    // 新增线路明细
    async saveXianLu () {
      let http = new HttpResetClass()
      let data = {
        f_process_id: this.selectdata.f_process_id,
        user: Vue.user,
        guanXian: this.guanXian,
        selectdata: this.selectdata
      }
      await http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/addApplyXianLu`, {data:data}, {
        resolveMsg: null,
        rejectMsg: '新增线路失败！'
      }).then((res) => {
        this.guanXian = {}

        this.showGuanXian = false
        this.$dispatch('breakControl', res.data)
      })
    },
    async deleteXianLu(row){
      this.$resetdelete(`${this.$androidUtil.getProxyUrl()}/rs/entity/t_pipeline_material_apply`, {id: row.id}, {
        resolveMsg: '删除成功',
        rejectMsg: '删除失败'
      }).then((res) => {
        this.$dispatch("delResid", row.id)
        this.$dispatch('breakControl', this.selectdata)
      })
    },
    async search () {
      let http = new HttpResetClass()
      let data = {
        f_process_id: this.selectdata.f_process_id
      }
      let res = await http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/sql/getZhiXianMingXi`, {data:data}, {
        resolveMsg: null,
        rejectMsg: '线路明细查询失败！！！'
      })
      this.model.data = res.data
    },
    showGuanXianModal(row){
      this.guanXian = row
      this.showGuanXian = !this.showGuanXian
    },
    closeModal() {
      this.showGuanXian = false
      this.guanXian = {}
      this.search()
    }
  }
}
</script>

<style scoped>
.form-control{
  padding: 8px 12px;
}
</style>
