<template>
  <div>
    <div style="height: 390px">
      <div >
        <add class="inline-16" @addSuccess="onSuccess" v-if="tool.checkAuth($route.name,'otherExpenses') && status === '新建'"></add>
        <el-input
            placeholder="请输入搜索内容"
            :suffix-icon="params.content.where.condition?params.content.where.condition.length > 0?'':'':'el-icon-search'"
            v-model="params.content.where.condition"
            style="width:200px"
            size="small"
            class="input-with-select inline-16"
            @keyup.native.enter="listData(params.content.pageNumber = 1)"
            @clear="clearData"
            clearable>
        </el-input>
      </div>
      <div style="margin-top: 15px">
        <tableLayout :layout="tablecols" :data="list" :opwidth="200" :custom="true"  :height="tableHieght" fixedName="operation">
          <template v-slot:customcol="scope">
            <div v-if="scope.column.columnname === 'province'">
              <p>{{ scope.column.data.province + '-' + scope.column.data.city + '-' + scope.column.data.county}}</p>
            </div>
            <div v-else-if="scope.column.columnname === 'operation'">
              <span>{{scope.column.data[scope.column.columnname]}}</span>
            </div>
            <div v-else-if="scope.column.columnname === 'price'">
              <span>{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
            </div>
            <div v-else-if="scope.column.columnname === 'amount'">
              <span>{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
            </div>
            <p v-else>{{scope.column.data[scope.column.columnname]?scope.column.data[scope.column.columnname]:'--'}}</p>
          </template>
          <template v-slot:opreation="scope">
            <!--          <edit class="inline-16"  :data="scope.data" @updateSuccess="onSuccess" :disabled="rowData.disabled"></edit>-->
            <edit class="inline-16"  :data="scope.data" @editSuccess="onSuccess" :status="status"></edit>
            <el-popconfirm
                title="确定删除该费用吗？"
                @confirm="onDel(scope.data.sa_quotedprice_specialitemsid)"
            >
              <el-button slot="reference" type="text" size="mini" class="inline-16" :disabled="!tool.checkAuth($route.name,'otherExpenses') || status !== '新建'">删除</el-button>
            </el-popconfirm>

          </template>
        </tableLayout>
      </div>
      <div style="margin-top:16px;text-align:right">
        <el-pagination
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="params.content.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
    <div style="height: 390px">
      <div >
<!--        <add class="inline-16" @addSuccess="onSuccess" v-if="tool.checkAuth($route.name,'otherExpenses') && status === '新建'"></add>-->
        <el-button size="small" type="primary" @click="addNotes" :disabled="!addShow" v-if="tool.checkAuth($route.name,'otherExpenses') && status === '新建'">添加</el-button>
      </div>
      <div style="margin-top: 15px">
        <el-table ref="table" size="mini"  border :data="notes">
          <el-table-column
              label="报价说明">
            <template slot-scope="scope">
              <span v-if="!saveShow || index !== scope.row.index">{{scope.row.notes}}</span>
              <span v-else-if="saveShow && index === 0">
               {{scope.row.notes}}
                <el-select v-model="value" placeholder="请选择" size="mini">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value">
                  </el-option>
                </el-select>
              </span>
              <span v-else>
                <el-input v-model="scope.row.notes"></el-input>
              </span>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="120px">
            <template slot-scope="scope">
              <el-button class="inline-16" size="mini" type="text" v-if="!saveShow" :disabled="scope.row.index === 1 || !tool.checkAuth($route.name,'otherExpenses') || status !== '新建'" @click="onEdit(scope.row)">编 辑</el-button>
              <el-popconfirm
                  title="确定删除该报价说明吗？"
                  @confirm="onDelNodes(scope.row)"
              >
                <el-button slot="reference" size="mini" type="text" v-if="!saveShow" :disabled="scope.row.index === 0 || scope.row.index === 1 || !tool.checkAuth($route.name,'otherExpenses') || status !== '新建'" >删 除</el-button>
              </el-popconfirm>

              <el-button size="mini" type="text" v-if="saveShow && index === scope.row.index" @click="onSave">保 存</el-button>
              <el-button size="mini" type="text" v-if="saveShow && index === scope.row.index" @click="onCancel">取 消</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import add from './add'
import edit from './edit'
export default {
  name: "index",
  props:["status","data"],
  components:{add,edit},
  data(){
    return {
      tableHieght:"300px",
      tablecols:[],
      list:[],
      saveShow:false,
      addShow:true,
      total:0,
      currentPage:0,
      index:'',
      params:{
        "id": 20230211155603,
        "content": {
          "sa_quotedpriceid":this.$route.query.id,
          "pageNumber": 1,
          "pageSize": 20,
          "where": {
            "condition": ""
          }
        }
      },
      notes:[],
      value:'含运费',
      options:[
        {
          value:'含运费'
        },
        {
          value:'不含运费'
        }
      ],
      noteLast:''
    }
  },
  methods:{
    async listData(){
      const res = await this.$api.requested(this.params)
      this.list = res.data
      this.total = res.total
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.listData()
    },
    clearData(){
      this.params.content.pageNumber = 1
      this.listData()
    },
    onSuccess(){
      this.listData()
    },
    async onDel(id){
      const res = await this.$api.requested({
        "id": 20230211155703,
        "content": {
          "sa_quotedprice_specialitemsids":[id]
        }
      })
      this.tool.showMessage(res,()=>{
        this.listData()
      })
    },
    addNotes(){
      this.addShow = false
      this.index = this.notes.length
      this.notes.push({
        index:this.notes.length,
        notes:""
      })
      this.saveShow = true
      console.log(this.notes)
    },
    async onSave(){
      if (this.index === 0){
        if (this.value === '含运费'){
          this.notes[0].notes = '1、报价为含税13%税率, 含运费'
        }else {
          this.notes[0].notes = '1、报价为含税13%税率, 不含运费'
        }
      }
      this.notes.forEach((item,index)=>{
        this.data.quotedpricenotes[index] = item.notes
      })
      const res = await this.$api.requested({
        "id": 20221020164803,
        "content":this.data
      })
      this.tool.showMessage(res,()=>{
        this.saveShow = false
        this.addShow = true
      })
    },
    onEdit(val){
      this.index = val.index
      if (val.index === 0){
        this.noteLast = this.notes[0].notes.substring(this.notes[0].notes.lastIndexOf(','))
        console.log(this.noteLast)
        if (this.noteLast === ',含运费'){
          this.value = '含运费'
        }else if(this.noteLast === ',不含运费') {
          this.value = '不含运费'
        }
        this.notes[0].notes = this.notes[0].notes.substring(0,this.notes[0].notes.lastIndexOf(','))
      }
      this.saveShow = true
      this.addShow = false
    },
    async onDelNodes(val){
      this.notes.splice(val.index,1)
      this.data.quotedpricenotes = []
      this.notes.forEach((item,index)=>{
        this.data.quotedpricenotes[index] = item.notes
      })
      const res = await this.$api.requested({
        "id": 20221020164803,
        "content":this.data
      })
      this.tool.showMessage(res,()=>{
        this.saveShow = false
        this.addShow = true
      })
    },
    onCancel(){
      if (this.noteLast === ', 含运费'){
        this.notes[0].notes = '1、报价为含税13%税率, 含运费'
      }else if(this.noteLast === ', 不含运费') {
        this.notes[0].notes = '1、报价为含税13%税率, 不含运费'
      }
      this.saveShow = false
      this.addShow = true
    }
  },
  mounted() {
    this.listData()
    this.notes = this.data.quotedpricenotes
    this.notes = this.notes.map((e,index) =>{
      return {
        notes:e,
        index:index
      }
    })
  },
  created() {
    this.tablecols = this.tool.tabelCol(this.$route.name).otherExpensesTable.tablecols
  },
}
</script>

<style scoped>

</style>