<template>
  <div class="app-container">
    <el-dialog
      :title="title"
      :visible.sync="dialogVisibl"
      width="30%"
      :before-close="dialog"
      center
    >
      <div v-if="control != 4">
        <!-- 图片说明 -->
        <el-image v-if="control == '1'" style="width: 100%" :src="idt">
        </el-image>
        <!-- 视频说明 -->
        <comvideo
          v-if="control == '2'"
          :videoUrl="idt"
          :videoCover="videoCover"
        ></comvideo>
        <!-- 语音说明 -->
        <audio v-if="control == '3'" controls ref="audio" class="aud">
          <source :src="idt" />
        </audio>
      </div>
      <!-- 沟通后金额 -->
      <div v-if="control == '4' || control == '9'">
        <el-form :model="form">
          <el-form-item label="沟通后金额">
            <el-input
              class="delInput"
              type="number"
              v-model="form.money"
              placeholder="请输入沟通后金额"
            ></el-input>
          </el-form-item>
          <el-form-item label="管理员备注" v-if="control == '4'">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入管理员备注"
              v-model="form.adminRemark"
              maxlength="500"
              show-word-limit
              :autosize="{ minRows: 4}"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 驳回 -->
      <div v-if="control == '5'">
        <el-form :model="form">
          <el-form-item label="驳回理由">
            <el-input
              v-model="form.name"
              type="textarea"
              placeholder="请输入驳回理由"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span
        v-if="control == '4' || control == '5' || control == '9'"
        slot="footer"
        class="dialog-footer"
      >
        <el-button type="primary" @click="clickDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import comvideo from "./video.vue";

export default {
  name: "orderform",
  components: {
    comvideo,
  },
  props: {
    dialogVisibl: {
      type: Boolean,
    },
    control: {
      type: String,
    },
    bindex: {
      type: Array,
    },
    idt: {
      type: [String, Number],
    },
    videoCover: {
      type: [String, Number],
    },
  },
  data() {
    return {
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      // srcList: [
      //   'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      //   'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      // ],
      form: {
        name: "",
        money: "",
      },
      title: "",
      id: "",
    };
  },
  watch: {
    control(st, old) {
      let self = this;

      if (st == "4") {
        this.title = "生成支付订单";
        if (self.dialogVisibl) {
          this.bindex.forEach((element) => {
            if (self.idt == element.id) {
              self.form.money = element.dataName;
              console.log(
                self.form.money,
                element.dataName,
                "element.dataName"
              );
            }
          });
        }
      } else if (st == "1") {
        this.title = "";
      } else if (st == "5") {
        this.title = "订单驳回";
      } else if (st == "9") {
        this.title = "生成退款订单";
        if (self.dialogVisibl) {
          this.bindex.forEach((element) => {
            if (self.idt == element.id) {
              self.form.money = element.dataName;
              console.log(
                self.form.money,
                element.dataName,
                "element.dataName"
              );
            }
          });
        }
      }
    },
    idt(val, old) {
      this.$nextTick(() => {
        this.$refs.audio.src = val;
      });
    },
    bindex(st, old) {
      console.log(st, old, this.idt, "000000000000");
    },
  },
  created() {},
  methods: {
    dialog() {
      this.$emit("visivie");
    },
    clickDialog() {
      this.$emit("clickDialog");
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .delInput input::-webkit-outer-spin-button,
::v-deep .delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep .delInput input[type="number"] {
  -moz-appearance: textfield;
}
</style>