<template>
  <div class="content-main">
    <div style="text-align:center">农产品期贷行情</div>
    <el-form label-width="80px">
    <el-row style="margin: 10px 0 0 0;">
      <el-col :span="8">
        <el-form-item label="发布日期:">
           <el-date-picker
           :disabled="disableFlag"
            v-model="formInline.fbsj"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="发布日期"
            class="dataStyle">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  label="发布人:" style="margin:0 auto;">
          <el-input :disabled="disableFlag" v-model="formInline.fbr" class="inputCompatible" placeholder="发布人"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="是否置顶:" style="float:right">
          <el-select :disabled="disableFlag" v-model="formInline.zdzt" class="inputCompatible" placeholder="是否置顶">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
      <el-table border :data="tableData" stripe style="width:100%">
        <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
        <el-table-column prop="lspzmc" label="品种" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.lspzmc"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="zjs" label="昨结算" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.zjs"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="jkp" label="今开盘" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag"  size="small" v-model="scope.row.jkp"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="zgj" label="最高价" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.zgj"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="zdj" label="最低价" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.zdj"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="jsp" label="今收盘" align="center" show-overflow-tooltip>
          <template  slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.jsp"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="jjs" label="今结算" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.jjs"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="zd1" label="涨跌1" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.zd1"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="zd2" label="涨跌2" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.zd2"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="cjl" label="成交量(手)" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.cjl"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="kpl" label="空盘量" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.kpl"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="zjl" label="增减量" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.zjl"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="cje" label="成交额(万元)" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.cje"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="jgjsj" label="交割结算价" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input :disabled="disableFlag" size="small" v-model="scope.row.jgjsj"></el-input>
          </template>
        </el-table-column>
        <el-table-column v-if="isLook" align="center" fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="light" content="添加" placement="top">
                <i @click="addTab(scope.$index)"  class="iconfont iconxinzeng11"></i>
              </el-tooltip>
              <el-tooltip class="item" effect="light" content="删除" placement="top">
                <i @click="removeTab(scope.$index)" class="iconfont iconjianhao"></i>
              </el-tooltip>
            </template>
        </el-table-column>
      </el-table>
    </el-form>
    <span class="detail-footer">
      <el-button
        v-if="!disableFlag"
        @click="save"
        type="primary"
        size="small"
        class="iconfont iconbaocun"
      >保存</el-button>
      <el-button @click="returnList" type="primary" size="small" class="iconfont iconfanhui">返回</el-button>
    </span>
  </div>
</template>
<script>
import { insertFarmProduceTransaction,selectFarmProduceTransactionDetail,updateFarmProduceTransaction } from "@/api/grainCirculationPrice/tradingCenter/agricultureProducts";
import { getNowDate } from "@/utils/index";
export default {
  data() {
    return {
      isLook:true,
      createdTime:'',
      tableData: [{}],
      formInline: {zdzt:'',sxh:''},
      disableFlag: false
    };
  },
  methods:{
    getDetail(){
      console.log(this.$route.query,"路由传过来的数据")
      if (this.$route.query.id) {
        selectFarmProduceTransactionDetail({ hqbm: this.$route.query.id }).then(
          res => {
            if (res.infoCode == 200) {
              this.formInline = res.data;
              this.tableData = res.data.detailList;
            }
            console.log(this.formInline)
          }
        );
        switch (this.$route.query.state) {
          case "edit":
            this.disableFlag = false;
            break;
          case "detail":
            this.isLook = false;
            this.disableFlag = true;
            break;
        }
      } else {
        this.disableFlag = false;
        // this.formInline.fbsj = getNowDate();
        // this.formInline.fbr = sessionStorage.getItem("userName");
      }
    },
      returnList(){
          this.$router.push({
                name: 'agricultureProducts'
            })
      },
      save(){
        this.tableData.map((item,index)=>{
          item.sxh = index
          console.log(item,"item")
        })
        let data = {
          detailList: this.tableData,
          fbsj: this.formInline.fbsj,
          fbr: this.formInline.fbr,
          fbzt: 0,
          fbztmc: '未发布',
          hqbm: this.$route.query.id,
          zdzt: this.formInline.zdzt,
          zdztmc: this.formInline.zdzt == 0 ? '否' :'是',
        }
        console.log(data,"保存的数据")
        // return false
        if(this.$route.query.id){
          updateFarmProduceTransaction(data).then(res=>{
            if (res.infoCode == 200) {
              this.$message({
                message: "保存成功",
                type: "success"
              });
              this.$router.push({ name: "agricultureProducts" });
            }
          })
        }else{
          insertFarmProduceTransaction(data).then(res=>{
            if (res.infoCode == 200) {
              this.$message({
                message: "保存成功",
                type: "success"
              });
              this.$router.push({ name: "agricultureProducts" });
            }
          })
        }
      },
      addTab(rowIndex){
        this.tableData.splice(rowIndex+1, 0, {});
        console.log(rowIndex,"添加的列表")

      },
      //删除
      removeTab(rowIndex){
        if(this.tableData.length == 1){
          this.$message({
            message: '无法删除',
            type: 'warning'
          });
        }else{
          this.tableData.splice(rowIndex, 1);
        }
      },
      // createdTimeFormat(createdTime){
      //   let date = new Date(createdTime * 1000)
      //   let Y = date.getFullYear()
      //   let M = date.getMonth() + 1
      //   M = (M < 10 ? '0' + M : M)
      //   let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      //   let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours())
      //   let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
      //   let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      //   return Y + '-' + M + '-' + D + ' ' + h+ ':' + m + ':' + s
      //   console.log()
      // }
  },
  created(){
    this.getDetail();
    // this.createdTimeFormat(this.createdTime)
  }
};
</script>
<style>
.dataStyle{
  width:250px!important;
}
</style>